CSS 动画：在 Chrome 中有效，但在 Firefox 中无效？
在旋转动画中，适用于 Chrome，但不适用于 Firefox。为什么？
@-moz-keyframes rotate {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#example {
background: red;
width: 100px;
height: 100px;
-moz-animation: rotate 20s linear 0 infinite;
-webkit-animation: rotate 20s linear 0 infinite;
}
In rotate animation, works in Chrome but not in Firefox. Why?
@-moz-keyframes rotate {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#example {
background: red;
width: 100px;
height: 100px;
-moz-animation: rotate 20s linear 0 infinite;
-webkit-animation: rotate 20s linear 0 infinite;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
除非
0的时间值有单位，否则当前的 Firefox 实现会失败。使用0s或0ms。http://jsfiddle.net/WsWWY/1/
注意：W3C 明确允许数字 0（不带单位）作为长度值，但对于其他值没有这样的规定。就我个人而言，我希望这种情况能够改变，但目前 Firefox 的行为并没有错。
Current Firefox implementations fail unless time values of
0have units. Use0sor0ms.http://jsfiddle.net/WsWWY/1/
Note: The W3C explicitly allows for the number 0, without units, to be a length value, but it says no such thing for other values. Personally, I hope this changes, but for the time being the Firefox behavior is not incorrect.