animation

animation(动画)：animation属性是一个简写属性

• animation-name：属性为@keyframes动画规定名称；

• animation-duration规定完成动画所花费的时间；

• animation-timing-function:规定动画的速度曲线：

    1，linear    动画从头到尾的速度是相同的。
  
    2，ease  默认值。动画以低速开始，然后加快，在结束前变慢。
  
    3，ease-in   动画以低速开始。
  
    4，ease-out  动画以低速结束。
  
    5，ease-in-out   动画以低速开始和结束。
  
    6，cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  

#######前面的6个属性值都是根据三次贝塞尔曲线来生成速度曲线，产生的动画效果也是线性动画，动画的效果是具有连贯性的；

animation-timing-function还有steps（）函数，这个steps()函数是干嘛的呢，animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画的效果是连贯性的，像其他基于贝塞尔曲线设置的都是连贯的，但是有些效果我们不需要补间动画，我们只需要关键帧的跳跃，这时候我们就该使用steps()过渡方式;

steps()我们又把它成为帧动画，对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

steps函数指定了一个阶跃函数

第一个参数指定了时间函数中的间隔数量（必须是整数）

第二个参数可选，接受start和end两个值，指定指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；

step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。

帧动画.png

• animation-delay：规定动画何时开始，默认值是0；

• animation-iteration-count:规定动画播放的次数，默认值是1，可以是小数，不可以是负数，infinite规定动画无限循环播放；

• animation-direction属性设置动画是否反向播放：

    1，normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
  
    2，alternate:动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。如果设置动画播放一次，该属性没有作用；
  
    3，reverse：反向运行动画，每周期结束动画由尾到头运行。
  
    4，alternate-reverse:动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
  

• animation-fill-mode用来指定在动画执行之前和之后如何给动画的目标应用样式:

    1,none:动画执行前后不改变任何样式;
  
    2,forwards:保持最后一帧的状态；
  
    3，backwards：保持第一帧的状态；
  
    4，both：动画将会执行 forwards 和 backwards 执行的动作；
  

• animation-play-state定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放，恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。这个属性需要触发条件 ：

    1，running:当前动画正在运行。
  
    2,paused:当前动画以被停止。