Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
246 views
in Technique[技术] by (71.8m points)

html - CSS Animation: Works in Chrome but not in 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/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...