我已经审查了很多演示,不知道为什么我不能得到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);} }