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

Question

我刚刚设置了几个 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 文件的一部分。我不确定这是否相关？

编辑： 这是一个 link 演示 https://jsfiddle.net/0Lha6dfg/（在 Chrome / Safari 中工作正常但在 FF (36.0. 1))

Answer 1

确保完整地写出您的动画 shorthand 属性，不要跳过属性。 Shorthand 格式来自 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"。

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

CSS animation rules disappear in Firefox resulting in no animation

css

firefox

css-animations