CSS3 中的动画

制作动画分两步：定义动画和使用动画。

1、keyframes 定义动画

  /* widen 是动画名称，可以根据自己的需要命名 */
  @keyframes widen {
     0%{
      width: 100px;
    } 
    100%{
      width: 200px;
    }
  }

0% 是动画的开始，100% 是动画的完成。这样的规则就是 动画序列。我们可以用多个百分比来规定变化发生的时间，比如 25%、50%等，或者用关键词 from 和 to，等同于 0% 和 100%。

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐变为新样式的动画效果。

2、元素使用动画

  div {
    width: 100px;
    height: 100px;

    /* 动画名称：widen（必写项） */
    animation-name: widen;

    /* 完成一个周期动画需要花费的时间（必写项） */
    animation-duration: 5s;

    /* 动画的速度曲线，默认 ease */
    animation-timing-function: ease;

    /* 动画何时开始，默认是 0 */
    animation-delay: 2s;

    /* 动画播放的次数，默认是 1，infinite 是无限循环 */
    animation-iteration-count: infinite;

    /* 动画是否在下一周期逆向播放，默认是 normal，alternate 是逆播放 */
    animation-direction: alternate;

    /* 动画是否正在运行或暂停，默认是 running，pause 是暂停 */
    animation-play-state: running;

    /* 动画结束后保持当前状态（forwards）或者回到起始状态（backwards） */
    animation-fill-mode: forwards;
  }

以上的动画属性可以简写为：

  animation: widen 5s ease 2s infinite alternate forwards;

简写的属性里面不包含 animation-play-state，暂停动画通常和鼠标经过等事件配合使用。

3、动画曲线

动画曲线与 transition 中的运动曲线一致： linear（匀速）、ease（逐渐慢下来）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）。

除了这些，动画曲线中还有一种自定义的曲线 steps，指定了时间函数中的间隔数量（也就是分几步来完成动画）。

  @keyframes move {
     0%{
      left: 0px;
    } 
    100%{
      left: 200px;
    }
  }
  div {
    position: absolute;
    width: 100px;
    height: 100px;
    anmition: move 4s steps(5) forwards;
  }

上面例子中， div 盒子用 4 秒的时间从左向右移动 200px，steps 为 5，那么每步的时间是 4/5 = 0.8s，也就是每 0.8s 移动 40px，5s 正好移动 200px。

如果我们要为元素添加多个动画，可以用 逗号 分隔。

  animation: widen 5s ease alternate forwards, move 4s steps(5) forwards;