要使用CSS3动画,您还必须定义实际的动画关键帧( 您将其命名为spin
)
配置了动画的时间后,您需要定义动画的外观。这是通过使用@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);}
}