CSS旋轉動畫只能在Webkit中工作

Question

我想要一個無限旋轉360度的元素。這是我的代碼：

.rotate-animation { 
    -webkit-animation: rotate 2s linear 0 infinite normal; 
    -moz-animation: rotate 2s linear 0 infinite normal; 
    -o-animation: rotate 2s linear 0 infinite normal; 
    -ms-animation: rotate 2s linear 0 infinite normal; 
    animation: rotate 2s linear 0 infinite normal; 
} 

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 

    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

@-moz-keyframes rotate { 
    from { 
    -moz-transform: rotate(0deg); 

    } 
    to { 
    -moz-transform: rotate(360deg); 
    } 
} 

@-o-keyframes rotate { 
    from { 
    -o-transform: rotate(0deg); 

    } 
    to { 
    -o-transform: rotate(360deg); 
    } 
} 

@-ms-keyframes rotate { 
    from { 
    -ms-transform: rotate(0deg); 

    } 
    to { 
    -ms-transform: rotate(360deg); 
    } 
} 

@keyframes rotate { 
    from { 
    transform: rotate(0deg); 

    } 
    to { 
    transform: rotate(360deg); 
    } 
} 

它只適用於Webkit瀏覽器。我究竟做錯了什麼？

Answer 1

您還必須定義零秒0s秒。像這樣：

-moz-animation: rotate 2s linear 0s infinite normal; 

而是這個

-moz-animation: rotate 2s linear 0 infinite normal; 

檢查的這http://jsfiddle.net/srxzF/2/

Answer 2

在宗旨，爲更安全更好的choise是小號在所有情況下寫秒。

rotate 2s linear 0s infinite normal;