Pretraži podršku

Izbjegni prevare podrške. Nikad te nećemo tražiti da nas nazoveš, da nam pošalješ telefonski broj ili da podijeliš osobne podatke. Prijavi sumnjive radnje pomoću opcije „Prijavi zlouporabu”.

Saznaj više

Choppy CSS animation on SVG in Firefox

  • 4 odgovora
  • 1 ima ovaj problem
  • 18 prikaza
  • Posljednji odgovor od 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!

Izmjenjeno od cor-el

Svi odgovori (4)

more options
more options

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

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.

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/