Question

我正在使用以下css3代码进行2d 360度动画。它适用于所有浏览器（当然除了版本＆lt; 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

Answer 2

你看过Greensock JS吗？它非常棒，非常方便。

http://www.greensock.com/get-started-js/

享受！

CSS3 webkit动画2d问题

2 个答案: