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

Answer 1

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

动画:redpulse 400ms 0s 1 alternate;/* 应该工作得更好*/

时间值需要单位。

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