CSS 动画：在 Chrome 中有效，但在 Firefox 中无效？答案

【问题标题】：CSS Animation: Works in Chrome but not in Firefox?CSS 动画：在 Chrome 中有效，但在 Firefox 中无效？
【发布时间】：2011-12-12 06:31:00
【问题描述】：

在旋转动画中，适用于 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;
}

http://jsfiddle.net/WsWWY/

【问题讨论】：

您能指定您的浏览器版本吗？

标签： html css css-animations

【解决方案1】：

除非0 的时间值有单位，否则当前的 Firefox 实现会失败。使用0s 或0ms。

http://jsfiddle.net/WsWWY/1/

注意：The W3C 明确允许数字 0（不带单位）作为长度值，但对于其他值则没有这样的说法。就个人而言，我希望这种情况有所改变，但目前 Firefox 的行为并没有错。

【讨论】：

值得一试的是，如果我们将20s 更改为2ms，则正方形根本没有动画。
@wesley murch 感谢您的编辑！ iPad 键盘没有反引号键真的溢出了我的堆栈。
@WesleyMurch：我的 FF7.0.1 for Mac 上的动画不移动 >0
虽然这个答案的措辞听起来像是 Firefox 有问题，但它实际上遵循标准，因为 0 不是有效的时间值。更多关于 here 和 here.
@BoltClock 那是因为当时我仍然希望 W3C 会选择一致性而不是任意性。