css动画工作在chrome但不是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;
}