css - css动画在chrome中工作，但在Firefox中工作

以下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覆盖！important CSS，而Firefox不会。

最佳答案

您的规则中的值太多，或者它写错了。

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;
}