Choppy CSS animation on SVG in Firefox

4 Mbohovái
1 oguereko ko apañuái
18 Hecha
Mbohovái ipaháva LaurenShutt

Ojapo 9 ary

2015-07-27 06:23

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!

Moambuepyre 2015 Jasypokõi 28 02:39:48 -0700 cor-el rupive

Answer 1 · 2015-07-27 06:23:05

cor-el

Moderator
Top 10 Contributor

2015-07-27 08:02

Try to ask advice at the Stack Overflow forum site.

Answer 2 · 2015-07-27 06:23:05

LaurenShutt Porandu apoha

2015-07-27 10:51

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

Answer 3 · 2015-07-27 06:23:05

cor-el

Moderator
Top 10 Contributor

2015-07-27 12:47

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.

https://support.mozilla.org/kb/upgrade-graphics-drivers-use-hardware-acceleration

Answer 4 · 2015-07-27 06:23:05

LaurenShutt Porandu apoha

2015-07-28 02:39

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/

Eheka Pytyvõha

Choppy CSS animation on SVG in Firefox

Opaite Mbohovái (4)

Ehecha peteĩteĩva apopyre

Ehecha peteĩteĩva téma

Eikundaha apopyre reheve

Ehechapaite aty peteĩteĩva téma rupive

Eñepytyvõkuaáta

Eheka Pytyvõha

Choppy CSS animation on SVG in Firefox

Opaite Mbohovái (4)