CSS动画：适用于Chrome，但不适用于Firefox？ [英] CSS Animation: Works in Chrome but not in Firefox?

问题描述

在旋转动画中，适用于Chrome，但不适用于Firefox。为什么？

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;
}

http://jsfiddle.net/WsWWY/

推荐答案

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

Current Firefox implementations fail unless time values of 0 have units. Use 0s or 0ms.

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

注意： W3C 明确允许数字0，没有单位，是一个长度值，但它说没有这样的事情为其他值。就个人而言，我希望这种变化，但目前Firefox的行为是不正确的。

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.

这篇关于CSS动画：适用于Chrome，但不适用于Firefox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！