为了使用旋转动画,你必须定义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);}
}