CSS3 旋转动画 [英] CSS3 Rotate Animation
本文介绍了CSS3 旋转动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<img class="image" src="" alt="" width="120" height="120">
无法使此动画图像起作用,它应该进行 360 度旋转.
Cannot get this animated image to work, it is supposed to do a 360 degrees rotation.
我猜下面的 CSS 有问题,因为它只是保持静止.
I guess something's wrong with the CSS below, as it just stays still.
.image {
float: left;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin-top: -60px;
margin-left: -60px;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
} to {
-ms-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
} to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
} to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
}
推荐答案
这是一个演示一个>.正确的动画 CSS:
Here is a demo. The correct animation CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
关于您的代码的一些说明:
Some notes on your code:
- 您在
.image
规则中嵌套了关键帧,这是不正确的 float:left
不适用于绝对定位的元素- 看看 caniuse:IE10 不需要
-ms-
前缀
- You've nested the keyframes inside the
.image
rule, and that's incorrect float:left
won't work on absolutely positioned elements- Have a look at caniuse: IE10 doesn't need the
-ms-
prefix
这篇关于CSS3 旋转动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文