我已经审查了很多演示，不知道为什么我不能得到CSS3旋转的功能。我使用最新的稳定版本的Chrome。
小提琴：
http://jsfiddle.net/9Ryvs/1/
CSS：
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}
HTML：
<div></div>
解决方法
要使用CSS3动画，你还必须定义实际的动画关键帧(你命名为spin)
阅读https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations了解更多信息
Once you’ve configured the animation’s timing,you need to define the appearance of the animation. This is done by establishing two or more keyframes using the 07001 at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
演示于http://jsfiddle.net/gaby/9Ryvs/7/
@-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);}
}
