为什么CSS动画在Chrome中正常工作，而在Firefox中不工作？ [英] Why CSS animations are working all smooth in Chrome but not in Firefox?

问题描述

为什么CSS动画在Chrome中平滑运行，而在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%; }
}

感谢一百万！

推荐答案

可能只是由于chrome和firefox的不同的渲染引擎。您可以查看此，如果您想看看你怎么能提高css的转换速度。
此外，您的代码不工作在Opera或Internet Explorer，因为您没有包括正常（无前缀）动画属性，Opera和IE 10使用。注意IE 9和下面不支持CSS动画。有关此处的详情。

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.

这篇关于为什么CSS动画在Chrome中正常工作，而在Firefox中不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！