1

我有一个简单的加载动画,其中涉及使用背景图像旋转 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;
4

1 回答 1

1

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

演示

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

-webkit-animation: spin 2s linear 0s infinite;
   -moz-animation: spin 2s linear 0s infinite;
        animation: spin 2s linear 0s infinite;
于 2013-07-18T17:21:55.197 回答