css3学习 - animation

css3 的 animation 是由 keyframes 来定义动画帧组 ，再由 animation-name:keyframes1, keyframes2, keyframes3....; 来调用所定义的 keyframes。

animation 相关属性：

animation-name:keyframe1,keyframe2...       

是用来定义一个动画的名称，其主要有两个值：keyframe1,keyframe2..是由Keyframes创建的动画名，换句话说此处的 keyframe1,keyframe2.. 要和Keyframes中的 keyframe1,keyframe2.. 一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。

animation-duration:times

用来指定元素播放动画所持续的时间长,单位为秒。

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。

animation-delay:times

用来指定元素动画开始时间。

animation-iteration-count:infinite | <number> [, infinite | <number>]*

用来指定元素播放动画的循环次数，其可以取值为整数，或者为infinite的时候就是无限次循环。

animation-direction:normal | alternate [, normal | alternate]*

用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

animation-play-stata:running | paused [, running | paused]*

用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持。