CSS動畫的工作，但在Firefox中沒有

Question

下面的CSS作品在Chrome 35，但在Firefox 30不起作用：

@-webkit-keyframes redpulse { 
    from { background-color: #FFAAA3; } 
    to { background-color: red; } 
} 

@-moz-keyframes redpulse { 
    from { background-color: #FFAAA3; } 
    to { background-color: red; } 
} 

@keyframes redpulse { 
    from { background-color: #FFAAA3; } 
    to { background-color: red; } 
} 

.red-pulse { 
    -webkit-animation: redpulse 400ms 0 1 alternate; 
    -moz-animation: redpulse 400ms 0 1 alternate; 
    animation: redpulse 400ms 0 1 alternate; 
} 

有沒有辦法，我掉進一些Firefox的特殊陷阱？

編輯解決方案：

感謝您的快速響應。這個問題轉變爲在基礎CSS上使用！important在Chrome和Firefox上有不同的實現。

Chrome會覆蓋！重要的CSS與動畫CSS，Firefox不會。

Answer 1

你在規則中有太多的值或者它是錯誤的。

animation: redpulse 400ms 0s 1 alternate;/* should work much better*/

時間值需要單位。

Firefox不再需要前綴。 DEMO 測試這和：

@keyframes redpulse { 
    to { background-color: red; } 
} 

html { 
    animation: redpulse 400ms alternate;/* or next to keep pulsing*/ 
    animation: redpulse 400ms alternate infinite; 
    background-color: #FFAAA3; 
}