Avatar for Username

تلاش سپورٹ

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.

مزید سیکھیں

اس تھریڈ کو آرکائیوکیا گیا تھا۔ اگر آپ کو مدد کی ضرورت ہو تو براہ مہربانی نیا سوال پوچھیں۔

Choppy CSS animation on SVG in Firefox

  • 4 جواب دیں
  • 1 میں یہ مسئلہ ہے
  • 18 دیکھیں
  • آخری جواب بذریعہ 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 کی جانب سے میں ترمیمکی گئ

تمام جوابات (4)

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

Try to ask advice at the Stack Overflow forum site.

LaurenShutt
LaurenShutt سوال کا مالک
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 سوال کا مالک
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/