2011-10-21 12 views
16

Al girar la animación, funciona en Chrome pero no en Firefox. ¿Por qué?Animación CSS: ¿Funciona en Chrome pero no en 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/

+0

¿Puede especificar la versión de su navegador? – Raptor

Respuesta

29

actuales implementaciones de Firefox fracasar a menos que los valores de tiempo de 0 tienen unidades. Use 0s o 0ms.

http://jsfiddle.net/WsWWY/1/

Nota: The W3C permite explícitamente el número 0, sin unidades, siendo un valor de longitud, pero no dice tal cosa para los demás valores. Personalmente, espero que esto cambie, pero por el momento el comportamiento de Firefox no es incorrecto.

+0

que vale la pena probar es que, si cambiamos '20s' a' 2ms', el cuadrado no se anima en absoluto. – Raptor

+2

@wesley murch ¡gracias por las ediciones! La falta de una tecla de retroceso del teclado del iPad realmente desborda mi stack. – kojiro

+0

@WesleyMurch: la animación en mi FF7.0.1 para Mac no se mueve> 0 < – Raptor

Cuestiones relacionadas