css3动画-animation

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: 100%;
     300%; 
  }

  to {
    margin-left: 0%;
     100%;
  }
}

  <h1>Watch me move</h1>
  <p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p>

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

animation事件

animationstart animation开始

animationend 结束

animationiteration 新的循环开始

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