CSS 动画规则在 Firefox 中消失，导致没有动画答案

【问题标题】：CSS animation rules disappear in Firefox resulting in no animationCSS 动画规则在 Firefox 中消失，导致没有动画
【发布时间】：2015-05-21 04:13:04
【问题描述】：

我刚刚设置了一些 css 动画，并且在 Chrome 和 Safari 中一切都运行顺利，但是 Firefox 似乎并不好。

以下代码：

#clock-animation .hour {
  -webkit-animation: anti-spin 30s infinite;
  animation: anti-spin 30s infinte;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

似乎显示为：

#clock-animation .hour {
    transform-origin: 50% 50% 0;
}

在 Firebug 中查看时，动画未播放。

我有点困惑为什么会这样，而且似乎没有任何解决办法。

这里也是使用的关键帧：

@-webkit-keyframes anti-spin {
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes anti-spin {
  100% {
    transform: rotate(-360deg);
  }
}

根据http://shouldiprefix.com/，关键帧、动画或变换不需要 -moz 前缀。也不是只有 Chrome 和 Safari 才需要的 -webkit。任何帮助都会很棒。

编辑：只需提及 ID 和类是内联 SVG 文件的一部分。我不确定这是否相关？

编辑：这是一个演示链接https://jsfiddle.net/0Lha6dfg/（在 Chrome / Safari 中可以正常工作，但在 FF (36.0.1) 中不能）

【问题讨论】：

我们可能需要一个演示，但您可能想查看这个问题 - stackoverflow.com/questions/29052074/…
感谢您的回复。我刚刚尝试过使用该解决方案，但不幸的是我没有取得任何成功。我现在在问题末尾附上了一个演示链接。
根据下面的答案，您有一些“无限”的拼写错误，当您更正这些错误时，其他转换问题就会发挥作用。总帐。

标签： css firefox css-animations

【解决方案1】：

确保完整地写出你的动画速记属性，不要跳过属性。来自w3 specs的速记格式：

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

变成：

div {
    animation: example 5s linear 2s infinite alternate;
}

所以在你的例子中添加animation-delay:

animation: anti-spin 30s linear infinite;

应该是：

animation: anti-spin 30s linear 0s infinite;

还要注意拼写错误，在某些地方您使用“infinte”而不是“infinite”。

【讨论】：

通常是这样简单的。非常感谢您的帮助！