在 Chrome 和 Safari 中基于 2d 变换函数的 CSS 动画，但在 Firefox 中没有

Question

我有一个简单的加载动画，其中涉及使用背景图像旋转 div。无论出于何种原因，动画在 Chrome 和 Safari 中都能完美运行，但在 Firefox 中却无法动画。此外，在检查器中查看元素时，没有显示动画属性，这让我相信 Firefox 会根据其语法拒绝该属性。据我所知，语法是 W3C 标准。这是关键帧代码：

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

这是选择器代码：

animation: 'spin' 2s linear 0s infinite;
-webkit-animation: 'spin' 2s linear 0s infinite;
-moz-animation: 'spin' 2s linear 0s infinite;

Answer 1

从'spin' 中删除“ ”，如下所示：animation: spin 2s linear 0s infinite; 修复它。

见demo

编辑：我还可以补充一点，您应该将无前缀版本放在最后，如我的演示中所示。

-webkit-animation: spin 2s linear 0s infinite;
   -moz-animation: spin 2s linear 0s infinite;
        animation: spin 2s linear 0s infinite;