2011-10-21 3 views
16

In rotazione animazione, funziona in Chrome ma non in Firefox. Perché?Animazione CSS: funziona in Chrome ma non in 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

Puoi specificare la versione del tuo browser? – Raptor

risposta

29

attuali implementazioni di Firefox fallire a meno che i valori di tempo di 0 hanno unità. Utilizzare 0s o 0ms.

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

Nota: The W3C consente in modo esplicito per il numero 0, senza unità, per essere un valore di lunghezza, ma non dice nulla di simile per altri valori. Personalmente, spero che questo cambi, ma per il momento il comportamento di Firefox non è errato.

+0

vale la pena provare che, se cambiamo '20s' in' 2ms', il quadrato non si anima affatto. – Raptor

+2

@wesley murch grazie per le modifiche! La mancanza della chiave di un backtick da parte della tastiera dell'iPad davvero oltrepassa il mio stack. – kojiro

+0

@WesleyMurch: l'animazione sul mio FF7.0.1 per Mac non si sposta> 0 < – Raptor