Avatar for Username

Przeszukaj pomoc

Unikaj oszustw związanych z pomocą.Nigdy nie będziemy prosić Cię o dzwonienie na numer telefonu, wysyłanie SMS-ów ani o udostępnianie danych osobowych. Zgłoś podejrzaną aktywność, korzystając z opcji „Zgłoś nadużycie”.

Więcej informacji

Wątek został zarchiwizowany. Jeśli potrzebujesz pomocy, zadaj nowe pytanie.

Choppy CSS animation on SVG in Firefox

  • 4 odpowiedzi
  • 1 osoba ma ten problem
  • 2 wyświetlenia
  • Ostatnia odpowiedź od LaurenShutt

LaurenShutt
LaurenShutt
more options

I have a simple CSS animation on an SVG image. It looks great in Chrome and Safari, but choppy and slow in Firefox. You can see it working on the page at http://www.asdk12.org/destination2020/d2020test/.

Here's the CSS: 

#student {
    -moz-animation-name:slidein-student;
    -moz-animation-iteration-count:1;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-duration:2.75s;
    -webkit-animation-name:slidein-student;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:2.75s;
    animation-name:slidein-student;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
    animation-duration:2.75s
}

#staff {
    -moz-animation-name:slidein-staff;
    -moz-animation-iteration-count:1;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-duration:2.75s;
    -webkit-animation-name:slidein-staff;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:2.75s;
    animation-name:slidein-staff;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
    animation-duration:2.75s
}

#community {
    -moz-animation-name:slidein-community;
    -moz-animation-iteration-count:1;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-duration:2.75s;
    -webkit-animation-name:slidein-community;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:2.75s;
    animation-name:slidein-community;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
    animation-duration:2.75s
}

#services {
    -moz-animation-name:slidein-services;
    -moz-animation-iteration-count:1;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-duration:2.75s;
    -webkit-animation-name:slidein-services;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:2.75s;
    animation-name:slidein-services;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
    animation-duration:2.75s
}

@-moz-keyframes slidein-student {
    0% {
        -moz-transform: translateY(-15px) translateX(-15px);
        display: none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(-15px) translateX(-15px);
        display: none;
        opacity: 0;
    }
    36% {
        display: block;
    }
    100% {
        -moz-transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}
@-webkit-keyframes slidein-student {
    0% {
        -webkit-transform: translateY(-15px) translateX(-15px);
        display: none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(-15px) translateX(-15px);
        display: none;
        opacity: 0;
    }
    35% {
        display:block;
    }
    100% {
        -webkit-transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}
@keyframes slidein-student {
    0% {
        transform: translateY(-15px) translateX(-15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(-15px) translateX(-15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}

@-moz-keyframes slidein-staff {
    0% {
        -moz-transform: translateY(-15px) translateX(15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(-15px) translateX(15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}
@-webkit-keyframes slidein-staff {
    0% {
        -webkit-transform: translateY(-15px) translateX(15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(-15px) translateX(15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}
@keyframes slidein-staff {
    0% {
        transform: translateY(-15px) translateX(15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(-15px) translateX(15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}

@-moz-keyframes slidein-community {
    0% {
        -moz-transform: translateY(15px) translateX(15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(15px) translateX(15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}
@-webkit-keyframes slidein-community {
    0% {
        -webkit-transform: translateY(15px) translateX(15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(15px) translateX(15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}
@keyframes slidein-community {
    0% {
        transform: translateY(15px) translateX(15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(15px) translateX(15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}

@-moz-keyframes slidein-services {
    0% {
        -moz-transform: translateY(15px) translateX(-15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(15px) translateX(-15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}
@-webkit-keyframes slidein-services {
    0% {
        -webkit-transform: translateY(15px) translateX(-15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(15px) translateX(-15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}
@keyframes slidein-services {
    0% {
        transform: translateY(15px) translateX(-15px);
        display:none;
        opacity: 0;
    }
        35% {
        -webkit-transform: translateY(15px) translateX(-15px);
        display: none;
        opacity: 0;
    }
    36% {
        display:block;
    }
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 1;
    }
}

Any insight would be greatly appreciated!

I have a simple CSS animation on an SVG image. It looks great in Chrome and Safari, but choppy and slow in Firefox. You can see it working on the page at http://www.asdk12.org/destination2020/d2020test/. Here's the CSS: <pre><nowiki>#student { -moz-animation-name:slidein-student; -moz-animation-iteration-count:1; -moz-animation-timing-function:ease-in-out; -moz-animation-duration:2.75s; -webkit-animation-name:slidein-student; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:2.75s; animation-name:slidein-student; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-duration:2.75s } #staff { -moz-animation-name:slidein-staff; -moz-animation-iteration-count:1; -moz-animation-timing-function:ease-in-out; -moz-animation-duration:2.75s; -webkit-animation-name:slidein-staff; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:2.75s; animation-name:slidein-staff; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-duration:2.75s } #community { -moz-animation-name:slidein-community; -moz-animation-iteration-count:1; -moz-animation-timing-function:ease-in-out; -moz-animation-duration:2.75s; -webkit-animation-name:slidein-community; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:2.75s; animation-name:slidein-community; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-duration:2.75s } #services { -moz-animation-name:slidein-services; -moz-animation-iteration-count:1; -moz-animation-timing-function:ease-in-out; -moz-animation-duration:2.75s; -webkit-animation-name:slidein-services; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:2.75s; animation-name:slidein-services; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-duration:2.75s } @-moz-keyframes slidein-student { 0% { -moz-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 36% { display: block; } 100% { -moz-transform: translateY(0px) translateX(0px); opacity: 1; } } @-webkit-keyframes slidein-student { 0% { -webkit-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 35% { display:block; } 100% { -webkit-transform: translateY(0px) translateX(0px); opacity: 1; } } @keyframes slidein-student { 0% { transform: translateY(-15px) translateX(-15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(-15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-moz-keyframes slidein-staff { 0% { -moz-transform: translateY(-15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-webkit-keyframes slidein-staff { 0% { -webkit-transform: translateY(-15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @keyframes slidein-staff { 0% { transform: translateY(-15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(-15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-moz-keyframes slidein-community { 0% { -moz-transform: translateY(15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-webkit-keyframes slidein-community { 0% { -webkit-transform: translateY(15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @keyframes slidein-community { 0% { transform: translateY(15px) translateX(15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-moz-keyframes slidein-services { 0% { -moz-transform: translateY(15px) translateX(-15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(-15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @-webkit-keyframes slidein-services { 0% { -webkit-transform: translateY(15px) translateX(-15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(-15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } } @keyframes slidein-services { 0% { transform: translateY(15px) translateX(-15px); display:none; opacity: 0; } 35% { -webkit-transform: translateY(15px) translateX(-15px); display: none; opacity: 0; } 36% { display:block; } 100% { transform: translateY(0px) translateX(0px); opacity: 1; } }</nowiki></pre> Any insight would be greatly appreciated!

Zmodyfikowany przez cor-el w dniu

Wszystkie odpowiedzi (4)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Try to ask advice at the Stack Overflow forum site.

LaurenShutt
LaurenShutt Zadający pytanie
more options

I actually started with stackoverflow and they referred me here. :(

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

I'm not seeing that much of a problem with the animation.

Did you try to disable hardware acceleration in Firefox?

Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.

  • Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
  • Do NOT click the Reset button on the Safe Mode start window

You can check if there is an update for your graphics display driver and check for hardware acceleration related issues.

LaurenShutt
LaurenShutt Zadający pytanie
more options

Hi, before your latest reply I had added some code so that the particular animation would not display in Firefox, due to how choppy it looked. I've commented that code out, it's now displaying again. Would you mind taking another look? I'll take the animation back out at the end of the day today.

I really appreciate your insight!

http://www.asdk12.org/destination2020/d2020test/