animation动画与transition过渡动画有两个明显的区别：

1、transition过渡动画只能执行一个时间段的动画，从初始到结束。而且必须有事件触发，比如hover事件，或者添加了新的class属性等。

2、animation动画可以分时间段执行，比如第一个时间段执行一段动画，第二个时间段执行第二个动画。而且动画是默认执行，不需要用户事件触发。

一、animation动画要执行的必要条件

1、先设置一个动画片段，利用“帧”（frame）的概念，学习过flash的人又有优越感了。

比如，最简单的，让一个球用2秒钟的时间从左边匀速滚动到右边400px的位置。

这句话包含了如下几个信息。

• 初始状态，0%的时候，球在最左边。

• 结束状态，100%的时候，球在右边400px处。

• 用时2秒钟。

• 匀速运动。

• 只运行一次。

• 计算机根据运动对象状态的差异，自动产生补间动画。

那么可以把上面分析出来的信息代码化。

move是该动画片段的名字。这是语法格式如下：

@keyframes move{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(400px);
  }

2、为运动对象添加animation动画。

#ball{   
    width:100px;   
    height:100px;   
    border-radius:50%;   
    background-color:#A94CAF;   
    animation:move 2s linear;  /*动画名称   执行的时间   匀速运动*/
    }

观察动画效果会发现，动画默认执行1次，结束后并不会停留在最终状态，而是恢复到初始状态。

提示：点击codepen编辑器右下角的RERUN按钮，可以再次播放效果。点击左上角edit on codepen，可以打开codepen网站编辑该代码。

See the Pen animation动画案例1 by zhaolanzhen (@mrszhao) on CodePen.

二、利用animation-delay属性设置动画延时的时间，利用animation-iteration-count属性设置运动次数。

如果不需动画立即执行，可以设置延时时间，第一个时间为执行时间，第二个为延迟时间。还可以设置执行次数，次数没有单位。

 animation:move 2s linear 1s 2;  /*动画名称   执行的时间   匀速运动  延迟1s执行  执行2次*/

See the Pen animation动画案例2 by zhaolanzhen (@mrszhao) on CodePen.

如果希望是无限次，可以设置为infinite.

See the Pen animation动画案例3 by zhaolanzhen (@mrszhao) on CodePen.

三、利用animation-direction属性改变运动方向。

animation-direction:normal | reverse | alternate | alternate-reverse

reverse:反转、颠倒的意思。表示反向运动。

alternate:交替，轮流的意思。这个值表示正反交替着运动，

alternate-reverse:表示默认反向运动，反正交替运动。

See the Pen animation动画案例4 by zhaolanzhen (@mrszhao) on CodePen.

四、利用animation-fill-mode属性改变运动结束的状态.

animation:move 2s ease forwards  ; /*动画结束后，停留在结束状态。*/

See the Pen animation动画案例5 by zhaolanzhen (@mrszhao) on CodePen.

五、利用animation-play-state可以暂停动画。默认是running值。

#ball:hover{
  animation-play-state:paused; /*当前状态暂停动画*/
}

See the Pen animation动画案例6 by zhaolanzhen (@mrszhao) on CodePen.

总结一下，animation动画共如下这几个属性，后面的是默认值：

• animation-name: none                           动画名称

• animation-duration: 0s                           执行时间   

• animation-timing-function: ease           加减速贝塞尔曲线，与transition的缓动动画原理一样。

• animation-delay: 0s                               延迟时间

• animation-iteration-count: 1                 执行次数

• animation-direction: normal                  默认运动方向

• animation-fill-mode: none                     默认运动后恢复到初始状态

• animation-play-state: running               默认处于运动状态

六、多个片段的animation动画

animation:tiantiao1 0.5s ease-in  forwards,  
          tiantiao2 0.2s ease-out 0.5s  forwards,
          tiantiao3 0.2s ease-in 0.7s  forwards,
          tiantiao4 0.15s ease-out 0.9s  forwards,
          tiantiao5 0.15s ease-in 1.05s  forwards,
          rightMove 0.4s ease-out 1.2s  forwards;

第一个动画片段执行完后，再执行第二个动画片段。第一个动画执行0.5s，所以第二个动画要延迟0.5s执行，第三个动画延迟0.7s执行。以此类推。

See the Pen animation动画案例7 by zhaolanzhen (@mrszhao) on CodePen.

是不是觉得animation动画的确比transition过渡动画厉害呢，突然有点怀念flash，莫名的伤感。