为了使用旋转动画,你必须定义css动画帧(animation keyframes)

阅读 https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations 获取更多的资料

一旦配置好动画的时序,还需要设置动画如何显示。这是通过使用两个或两个以上的@keyframes 关键字。每一个keyframe(关键帧)描述动画元素在动画序列给定的时间中如何显示。


案例代码: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);}
}