CODEWITHSUNDEEP
google-chromecssfirefox
carherlo
carherlo

Reputation: 45

Why CSS animations are working all smooth in Chrome but not in Firefox?

Why CSS animations are working all smooth in Chrome but not in Firefox?

url: http://carloshermoso.com/works/rwd/

#mainContent h2 { -moz-animation-duration:3s; -moz-animation-name:slideIn; -webkit-animation-duration:3s; -webkit-animation-name:slideIn; text-transform:uppercase; }
@-moz-keyframes slideIn
{
from { margin-bottom:100%; width:300%; }
to { margin-top:0%; width:100%; }
}
@-webkit-keyframes slideIn
{
from { margin-bottom:100%; width:300%; }
to { margin-top:0%; width:100%; }
}

Thanks a million!

Upvotes: 1

Views: 3052

Answers (1)

Kevin Pei
Kevin Pei

Reputation: 5872

Probably simply due to the different rendering engines of chrome and firefox. You can take a look at this if you want to see how you can improve the css transform speed. Additionally, your code isn't working in Opera or Internet Explorer because you haven't included the normal (no-prefix) animation property that Opera and IE 10 use. Note that IE 9 and Below don't support CSS animations at all. More information on that here.

Upvotes: 1

Related Questions