html – CSS动画:在Chrome中使用,但不在Firefox中?

前端之家收集整理的这篇文章主要介绍了html – 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;
}

http://jsfiddle.net/WsWWY/

解决方法

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

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

注意:The W3C明确允许没有单位的数字0作为长度值,但是对于其他值,它表示没有这样的东西。就我个人而言,我希望这种改变,但是目前Firefox的行为并不错误

猜你在找的HTML相关文章