Html Firefox（轻微瑕疵）和Safari（不可见）的CSS3动画存在问题？

Firefox和Safari中的CSS3动画有问题。在Chrome和Internet Explorer中，它就像一个魅力。我自己花了一段时间试图解决这个问题，但没有成功。我遵守了所有我能找到的规则，但我肯定错过了什么

HTML

<div class="background">
<div id="canvas" class="loading"></div>

以下是JSFIDLE：

---

任何帮助都将不胜感激

在FF 35中对我有效，不能再多说了

Safari需要在

transform

属性前面加前缀，因此将css更改为以下内容将使其正常工作（仅包括相关部分）：

可能最好以同样的方式更改

@关键帧

，以防Safari one day支持未固定的

@关键帧

，但仍需要前缀

变换

规则

最后一件事：通常认为，将属性的前缀版本放在标准版本之前是最安全的。我不完全确定，但我想这也适用于关键帧，因此您可能希望将

@-moz关键帧

放在

@关键帧

之前。这甚至可以解决Firefox的问题（假设标准的工作实现被错误版本覆盖，因为您将前缀放在标准后面）

我冒昧地用所有这些更改更新了您的小提琴：

编辑

我刚刚在您的代码中发现：

-webkit-animation: animate2 1.5s ease-in-out infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate2 1.5s ease-in-out infinite;

---

也许这就解释了Firefox的问题，你是否有机会在FF<15上测试这个问题？在任何情况下，

-moz animation

应该与其他两个相同。

它似乎在FF中对我起作用。你使用的是什么版本？@JoshCrozier使用Firefox 35。这是我在工件上遇到的问题：我发现animationon在Windows版本的Safari上不起作用（使用它进行测试），但在Mac Safari上效果很好。我不敢相信我在Firefox的代码中没有注意到这个问题，我对它进行了修正！但遗憾的是，它仍然会产生同样的断断续续的动画和工件（）。我使用的是Firefox 35.0。动画在你的Firefox上运行良好吗？我在另一台计算机上进行了检查，似乎Firefox工件是我的机器独有的。我现在就不谈了，谢谢你的帮助。如果你真的想到了任何可能是我在我的电脑上获得性能的原因，我洗耳恭听。

@-webkit-keyframes animate {
    0% {
        -webkit-transform: rotate(0deg)
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(220deg)
        transform: rotate(220deg)
    }
}

@-webkit-keyframes animate2 {
    0% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        -webkit-transform: rotate(-140deg);
        transform: rotate(-140deg);
    }
    50% {
        box-shadow: inset #5AA0E7 0 0 0 2px;
    }
    100% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        -webkit-transform: rotate(140deg);
        transform: rotate(140deg);

    }
}

-webkit-animation: animate2 1.5s ease-in-out infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate2 1.5s ease-in-out infinite;