动画在Web应用中不是必须的，但是使用得好能起到锦上添花的作用。早期在Web中看到的动画主要有Flash、Gif图片动画、JavaScript动画、SVG动画、APNG动画和CSS3动画等。特别是随着浏览器对CSS3属性支持力度的提高，使用CSS3制作动画的情景在Web应用中越来越频繁。

虽然实现动画的技术可以有多种不同的实现方式，但每种技术都存在一定的缺点，比如CSS3动画必须通过JavaScript去获取动态改变的值，setInterval的时间往往是不精确的而且还会卡顿，APNG动画体积过大等等。

实现方法多意味着实现方式也不同，其中涉及到的技术点也不同，对于Web开发者而言，都希望制作Web动画都具有一套统一的API规则：

值得庆幸的是，W3C提出Web Animation API，它致力于集合CSS3动画的性能，JavaScript的灵活，动画库的丰富等各家所长，将尽可能多的动画控制由原生浏览器实现，并添加许多CSS不具备的变量、控制以及调试选项等。

那么从这篇文章开始，我们将会花几节课的时间和大家一起来探讨Web Animation API相关的知识。

CSS3 Animation

W3C提出的Web Animation API常简称为WAAPI。在开始介绍WAAPI之前，咱们先来回忆一下现在制作动画常用的方法CSS3 Animation。为什么要拿CSS3 Animation出来说呢？因为CSS3 Animation的特性和WAAPI中很多特性非常的类似。

CSS3 Animation中动画最关键的是需要先通过@keyframes来声明一个动画，然后通过animation-name来调用@keyframes声明的动画。不然动画声明、调用之后，还需要触发动画。而触发动画方式主要有文档载入、状态伪类、JavaScript事件等方式来触发。

除此之外，CSS3 Animation除了animation-name之外，还提供了其它属性来控制动画，比如：

• animation-duration动画持续播放时长
• animation-delay动画延迟播放的时长
• animation-directoin动画播放方向
• animation-timing-function动画播放函数功能
• animation-fill-mode动画停留状态
• animation-iteration-count动画播放次数
• animation-play-state动画播放状态

简单来看W3C官网提供的一张有关于CSS3 Animation属性变化的过程示意图：

我们在这里对CSS3 Animation相关的介绍不做过多的阐述，如果您从未接触过有关于CSS3 Animation相关的知识，建议您先看看这篇文章。

为了后面更好的介绍WAAPI，咱们先来简单的看一个CSS3 Animation动画效果。

@keyframes anime {
  0% {
    transform: none;
  }

  25% {
    transform: translate(200px, 0);
  }

  50% {
    transform: translate(200px, 200px);
  }

  75% {
    transform: translate(0, 200px);
  }

  100% {
    transform: none;
  }
}

然后在需要有动效的元素上调用声明好的动画：

animation: anime 1000ms cubic-bezier(.6, 0, 1, .6) 500ms 50 normal bot