Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Denc nañu waxtaan wii. Yónneel yeneen laaj soo soxlaa ndimbal.

Choppy CSS animation on SVG in Firefox

  • 4 tontu
  • 1 am na jafe-jafe bii
  • 2 views
  • i mujjee tontu mooy 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!

cor-el moo ko soppali ci

All Replies (4)

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

Try to ask advice at the Stack Overflow forum site.

LaurenShutt
LaurenShutt Ki laajte
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 Ki laajte
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/