css3 animation属性

#rotate {  

margin: 0 auto;

600px;  

height: 400px;

/* 确保我们是在一个 3-D 空间 */  

transform-style: preserve-3d;

/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */  

animation-name: x-spin;

animation-duration: 7s;

animation-iteration-count: infinite;

animation-timing-function: linear;   

}  

/* 定义要调用的动画 */  

@keyframes x-spin {    

0% { transform: rotateX(0deg); }    

50% {transform: rotateX(180deg); }  

100% {transform: rotateX(360deg); }  

}

===============================================  

animation-name  动画的名称。  

animation-duration  定义动画播放一次需要的时间。默认为0；  

animation-timing-function  定义动画播放的方式，参数设置类似transition-timing-function  animation-delay  定义动画开始的时间  

animation-iteration-count  定义循环的次数，infinite即为无限次。默认是1。  

animation-direction  动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。另外还有reverse、alternate-reverse。

animation-fill-mode  动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。 可选值有：none：默认值，回到动画没开始时的状态; forwards：保持在结束状态 ; backwards：让动画回到第一帧的状态;  both: 根据animation-direction 轮流应用forwards和backwards规则。

浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。

div:hover {
animation: 1s rainbow infinite steps(10);
}

animation-play-state  动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。使用animation-play-state属性可以改变这种行为，paused表示动画停止，running表示动画继续。

div {
    animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}

==================================================

animation的简写形式为：

div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}