CSS3 animation的各个属性

“@keyframes”关键帧：自定义一些动画名称，规定什么时间做什么动作。即“@keyframes”后面跟着动画名称加上一对花括号“{...}”,花括号中是不同时间段样式。

例如

      @keyframes changecolor {

           0%{

                    background : red;

                }

           100%{

                    background : yellow;

               }

        }

animation 属性是一个简写属性，用于设置八个动画属性：

1. animation-name                 keyframes名称

2. animation-duration             指定完成动画所花费的时间，以秒或毫秒计

3. animation-timing-function   指定动画的速度曲线

4. animation-delay                 指定在动画开始之间的延迟

5. animation-iteration-count   指定动画应该播放的次数

6. animation-direction            指定是否应该轮流反向播放动画

7. animation-fill-mode            指定当动画不播放时（当动画完成时或动画有一个延迟未开始播放时），要应用                                              到的样式

8. animation-play-state          指定动画是否正在运行或已暂停

animation-timing-function  指定动画的速度曲线

1.linear           匀速

2.ease             默认，动画以低速开始，然后加快，在结束前变慢。

3.ease-in         缓慢开始（加速）

4.ease-out       缓慢结束（减速）

5.ease-in-out   缓慢开始，缓慢结束（先加速后减速）

animation-delay   动画开始之间的延迟

1.单位是秒或毫秒

2.可以是负值，-2秒表示动画立马开始，但跳过2秒进入动画，即前两秒的动画不执行，直接跳过前两秒进入动画。

animation-iteration-count    指定动画应该播放的次数

默认1次，可以设置2次，3次.......infinite表示无限

animation-direction    是否应该轮流反向播放动画

值	说明
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

 animation-fill-mode     指定当动画不播放时（当动画完成时或动画有一个延迟未开始播放时），要应用到的样式

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果

animation-play-state            指定动画是否正在运行或已暂停

paused        指定暂停动画

running       指定正在运行的动画

（使用animation实现视频播放效果的时候）