CSS3 webkit 动画 2d 问题

Question

我正在使用以下 css3 代码制作 2d 360 度动画。它适用于所有浏览器(当然 ie 版本 < 10 除外)但我不能让它适用于 webkit。正如您在此处看到的实例 http://www.franksdonuts.gr/mainpage/ webkit(chrome、safari)失败。我的代码如下:

@keyframes spinner {
 0% {
 -webkit-transform:rotate(0deg);
 -moz-transform:rotate(0deg);
 -ms-transform:rotate(0deg);
 -o-transform:rotate(0deg);
 transform:rotate(0deg);
}
 100% {
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 transform:rotate(360deg);
}
}
.spinner {
-webkit-animation: spinner 10s infinite linear;
-moz-animation: spinner 10s infinite linear;
-ms-animation: spinner 10s infinite linear;
-o-animation: spinner 10s infinite linear;
animation: spinner 10s infinite linear;
}

是否有更好的解决方案也可以使用 ie9 实现此 2d 旋转？

Answer 1

您应该使用专有的关键帧标签。

@-moz-keyframes
@-webkit-keyframes
@-o-keyframes