css3中 animation

animation 定义动画属性

CSS animation 属性是

1. animation-name，动画名称 用@keyframes定义动画
   animation-name属性是必须存在的，因为animation-name的值默认是none，没有动画。

2. animation-duration, 动画持续时间
   默认值为0s，表示无动画。

3. animation-timing-function，
   动画在每一动画周期中执行的节奏。可能值为一或多个
   （1）linear:表示动画从头到尾的速度都是相同的。

   （2）ease-in:表示动画以低速开始。

   （3）ease-out:表示动画以低速结束。

   （4）ease-in-out:表示动画以低速开始和结束。

4. animation-delay，
   动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
   默认值为0，立即开始
   可以为负值，-1在1秒时动画开始

5. animation-iteration-count，
   定义动画在结束前运行的次数 可以是1次 无限循环.
   infinite
   无限循环播放动画.
   
   动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

6. animation-direction，
   动画是否反向播放
   (1)normal
   每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
   (2)alternate
   动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
   (3)reverse
   反向运行动画，每周期结束动画由尾到头运行。
   (4)alternate-reverse
   反向交替， 反向开始交替
   动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

7. animation-fill-mode ,
   动画在执行之前和之后如何将样式应用于其目
   (1)none
   当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
   (2)forwards
   目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值：

8. animation-play-state
   定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
   这个属性不建议使用，兼容性差

属性的一个简写属性形式。**