01. keyframes

　　01. 语法：

　　　　@keyframes 动画名{

　　　　　　0%:{属性：值},

　　　　　　...

　　　　　　100%:{属性：值}

　　　　}

　　02. 0%可以用from替代 100%可以用to替代，其中0%的%不能省略

　　03. 百分比表示动画执行的整个过程是从0%到100%，其中到每一个百分点的时候属性变为指定的值0%和100%我们一般都要写上

02. animation-name:

　　用keyframes指定的动画名

03. animation-duration

　　动画持续的时间，以s或ms为单位

04. animation-timing-function:

　　用来指定改变属性值的变换速率，

　　和transition-timing-function的作用一样，具有六种变换方式

05. animation-delay:

　　延迟多久后执行动画，以s或者ms为单位

06. animation-iteration-count:

　　动画执行的次数，可以执行具体的次数，也可以为infinite，表示一直执行

07. animation-direction:

　　用来指定动画播放的方向，前提是设置了animation-iteration-count

　　取值可以为normal或者alternate

　　normal表示每一次都按照预定的来正常播放

　　alternate表示基数次向前播放，偶数次倒过来播放

08. animation-play-state

　　用来控制动画的播放状态

　　可以为running或者paused

　　running为默认值，可以设置为paused让动画赞不播放

09. animation-fill-mode

　　取值：

　　　　none 　　 　　 不改变默认值

　　　　forwards 　　    当动画完成后，保持最后一个属性值

　　　　backwards 　    在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

　　　　both 　　　　   同时应用forwards和backwards属性

10. 可以使用animation属性把前面几个属性综合写在一起,但如果指定animation-play-state需要额外指定，不能写在animation中

　　animation:name duration timing-function delay iteration-count dirction

11 注意点：

　　transition动画会在属性改变时才执行，但是animation动画会立马执行。