0

我想使用创建旋转图像CSS3,但我不知道为什么它在 Chrome 上不起作用。我用 Firefox 和 IE 进行了测试,它们都可以工作,但不能用 Chrome。我刚开始学习@keyframeCSS3。
我的代码有什么错误?

@-webkit-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-o-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.playing {
-webkit-animation-name: spin; 
-webkit-animation-duration: 1500ms;
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear;
-moz-animation-name: spin; 
-moz-animation-duration: 1500ms;
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear;
-o-animation-name: spin; 
-o-animation-duration: 1500ms;
-o-animation-iteration-count: infinite; 
-o-animation-timing-function: linear;
animation-name: spin; 
animation-duration: 1500ms;
animation-iteration-count: infinite; 
animation-timing-function: linear;
}
.playing:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
4

1 回答 1

2

你应该使用:

`-webkit-transform` 

(而不是transform

另请参阅这个简短的演示

于 2013-06-14T14:53:42.003 回答