CSS Animation: Works in Chrome but not in Firefox?

本秂侑毒 提交于 2019-11-26 21:13:39

问题


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/


回答1:


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

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.



来源:https://stackoverflow.com/questions/7844520/css-animation-works-in-chrome-but-not-in-firefox

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!