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