animation驱使一组css style变化到另外一组css style，它可以定义keyframes的集合，指定style的开始和结束状态，它是transition的增强。

配置animation

animation-delay：从加载到开始执行的延迟

animation-direction：normal|reverse|alternate|alternate-reverse   参考

normal：往前执行，完成后又回到原点

reverse：和定义的方向相反，完成后回到原点开始执行

alertnate：先往前到最后，又从最后往前执行，看上去比较顺滑

animation-duration：持续时间


animation-iteration-count：重复次数（infinite 无限）

animation-name：@keyframes定义的名称，描述每帧内元素的表现

animation-play-state：终止或者重新开始animation序列

animation-timing-function：定义运动曲线的function

animation-fill-mode：参考

用keyframes定义animation顺序

定义一系列的keyframe来描述元素在被给的时间内应该怎么表现。两个最重要的状态就是0%（最初状态）和100%（终止状态）别名是from和to，这两个状态是可选的，如果没有指定，就用当前元素计算出来的值。

例子：

h1 {

  -webkit-animation-duration: 3s;

  -webkit-animation-name: slidein;

}

@-webkit-keyframes slidein {

  from {

    margin-left: %;

    width: %;

  }

  to {

    margin-left: %;

    width: %;

  }

}

@keyframes定义了slidein，有两个状态0%和100%。最初状态 margin-left: 100%;width: 300%，3s后margin-left:0%;width:100%;

animation事件

animationstart animation开始

animationend 结束

animationiteration 新的循环开始

事件有两个属性 animationName  和 elapsedTime（运行时间）