使用CSS3实现动画效果

通过CSS3可以非常方便的实现炫酷的动画效果。

支持animation属性,需要ie版本大于9
0%,可以用 from 代替
100%,可以用 to 代替
比如:

 

实际上,animate是简写的属性,它一共可以设置6个动画属性,包括:
animation-name:keyframes的名称
animation-duration:动画时长,单位秒s/毫秒ms
animation-timing-function:动画的速度曲线
animation-delay:动画开始前的延时。这个是支持负值的哦。比如-2s,那么动画会跳过2s
animation-iteration-count:动画播放次数。这个可以设置为大于0的整数,或者infinite(此时动画会无限循环)。
animation-direction:是否轮流反向播放。可以设置为alternate或者normal。
alternate的情况下,1,3,5会正常播放;2,4,6反向播放。
如果动画播放次数设置为1,那么,animation-direction 属性设置无效。

另外,还有两个动画属性:
animation-play-state:动画是否正在运行或暂停
animation-fill-mode:规定对象动画时间之外的状态

可以参考:http://codepen.io/zhangwenan/pen/jWEjWX