CSS Animation: Works in Chrome but not in Firefox?

html css css-animations
Caio Tarifa picture Caio Tarifa · Oct 21, 2011 · Viewed 19.1k times · Source

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/

Answer

kojiro picture kojiro · Oct 21, 2011

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.

Related questions

How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back …

Read More
Imitating a blink tag with CSS3 animations

I really want to make a piece of text blink the old-school style without using javascript or text-decoration. No transitions, only *blink*, *blink*, *blink*! EDIT: This is different from that question because I ask for blinking without continuous transitions, whereas …

Read More
How can I create a marquee effect?

I'm creating a marquee effect with CSS3 animation. Now I can get the basic marquee effect, but the code is too specific for this demo. Is there a way to avoid using specific values like margin-left:-4200px;, so that …

Read More