html – CSS动画：在Chrome中使用,但不在Firefox中？

发布时间：2020-12-14 21:36:39 所属栏目：资源来源：网络整理

导读：在旋转动画中，可以在Chrome中使用，但不能在Firefox中运行。为什么？ @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }}@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); }

在旋转动画中，可以在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的行为并不错误。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!