我已经回顾了很多演示,并且不知道为什么我无法使CSS3自旋起作用。我正在使用最新的稳定版Chrome。
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); } <div></div>
要使用CSS3动画,您还必须定义实际的动画关键帧( 您将其命名为spin)
spin
配置了动画的时间后,您需要定义动画的外观。这是通过使用@keyframes规则建立两个或更多关键帧来完成的。每个关键帧描述动画元素在动画序列中给定时间应如何呈现。
@keyframes
@-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);} }