animation

这个属性是css3里的，具体的浏览器兼容性大家可以去Can I Use里面查看。

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state ; 

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：
animation-name       规定需要绑定到选择器的 keyframe 名称。
animation-duration   规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function   规定动画的速度曲线。
animation-delay       规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。
animation-direction  规定是否应该轮流反向播放动画。
animation-fill-mode   规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。animation-play-state  指定动画是否正在运行或已暂停。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

animation-timing-function

animation-duration、animation-timing-function、animation-delay和transition里面的transition-duration、transition-timing-function、transition-delay功能一样就不再多说了。
但是animation-timing-function属性里animation比transition多一个steps取值，steps函数可以实现分步过渡。steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

这里有一个例子，可以看到steps函数的用处：steps.html
还可以参考：steps()用法详解

animation-name

animation-name属性是指keyframes关键字定义的名称。比如：

div:hover {
  animation: 1s rainbow;
}

当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。然后我们定义rainbow效果：

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，还可以插入更多状态。参考实例：animation.html

keyframes

keyframes关键字写法还可以这样写：

@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

from代表0%，to代表100%。还可以省略某个状态，浏览器会自动推算中间状态：

@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

甚至，可以把多个状态写在一行：

@keyframes pound {
  from，to { transform: none; }
  50% { transform: scale(1.2); }
}

animation-iteration-count

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。

div:hover {  
    animation: 1s rainbow infinite;
}

也可以指定动画具体播放的次数：

div:hover {
    animation: 1s rainbow 3;
}

这里还有一个心脏跳动的例子。

animation-direction

动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。默认情况是，animation-direction等于normal：

    div:hover {
      animation: 1s rainbow 3 normal;
    }

animation-direction可以取以下值：

animation-fill-mode

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，可以使用animation-fill-mode属性。注意这个属性可以不用在动画的循环播放中，而animation-direction属性一般用在动画的循环播放中：

div:hover {
  animation: 1s rainbow forwards;
}

animation-fill-mode可以使用下列值：

1. none：默认值，回到动画没开始时的状态。
2. forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
3. backwards：让动画回到第一帧的状态。
4. both^？: 根据animation-direction轮流应用forwards和backwards规则。

animation

同transition一样，animation也是一个简写形式。各个属性的顺序也可以更改，但是animation-duration和animation-delay这两个属性之间的顺序必须是一前一后。

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

animation-play-state

规定动画正在运行还是暂停。有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。它有两个取值paused(停止)、running(运行)。
参考实例：animation1.html

总结

目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀：

div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;  
}

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}