17

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/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Caio Tarifa
  • 5,973
  • 11
  • 46
  • 73

1 Answers1

29

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.

kojiro
  • 74,557
  • 19
  • 143
  • 201
  • worth trying is that, if we change `20s` to `2ms`, the square does not animate at all. – Raptor Oct 21 '11 at 03:11
  • 2
    @wesley murch thanks for the edits! The iPad keyboard's lack of a backtick key really overflows my stack. – kojiro Oct 21 '11 at 03:11
  • @WesleyMurch: animation on my FF7.0.1 for Mac does not move >0 – Raptor Oct 21 '11 at 03:20
  • 5
    Although the way this answer is phrased makes it sound like Firefox is buggy, it's actually following the standard, as `0` is not a valid time value. More on that [here](http://stackoverflow.com/questions/13145352/units-on-0s-transition-in-firefox/13145406#13145406) and [here](https://developer.mozilla.org/en-US/docs/CSS/time). – BoltClock Oct 30 '12 at 18:52
  • @BoltClock that's because at the time I was still holding out hope that the W3C would choose consistency over arbitrariness. – kojiro Oct 30 '12 at 20:21
  • This still seems to be an issue in Firefox 31.0. Glad it's an easy fix though +1 – Adam Tomat Aug 01 '14 at 12:07
  • Is it possible to fix full background image transition in firefox too? – Fakt7 Sep 11 '14 at 18:03