1. 犀牛前端部落首页
  2. CSS百科

如何使用css3动画实现旋转效果

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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/801.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注