W3C提出Web Animation API（简称WAAPI）正缘于此，它致力于集合CSS3动画的性能、JavaScript的灵活、动画库的丰富等各家所长，将尽可能多的动画控制由原生浏览器实现，并添加许多CSS不具备的变量、控制以及或调的选项。看起来一切都很棒，是不是以后我们在动画技术选型上可以一招鲜吃遍天了呢？接下来请跟我一起敲开Web Animation API的奇妙之门。

如果你使用过SVG，你应该知道可以使用SMIL给SVG添加动画。CSS Transitions和keyframes动画都可以操作CSS属性来添加动画。 requestAnimationFrame() 使得浏览器可以在下一帧执行之前，请求一个动作。但是每一中动画技术都不是完美的，各自有各自的问题。

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

从上一篇文章中我们快速的了解了Web Animation API能做什么，也能使用Web Animation API制作类似CSS3 Animation实现的动效。但到目前为止，也仅仅就如此，并没有看到Web Animation API比CSS Animation有任何优势之处。那在这篇文章中，咱们来看看Web Animation API和CSS Animation明显性的区别。

上周，我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议，尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。

JavaScript提供了动画原生API，被称为Web Animations API。在这篇文章中我们称之为WAAPI。MDN有详细的文档，而且@Dan Wilson写了一个系列的文章来介绍WAAPI。在这篇文章中，我们将比较WAAPI和CSS Animation之间的差异。

WAAPI 让我们能够构建动画并控制动画的播放。WAAPI 向开发者开放了浏览器的动画引擎，开发者可以通过 Javascript 接口来操作该引擎。该 API 是基于 CSS 动画和 CSS 过渡实现的，并且考量了未来可能会增加的动画效果。它是 Web 平台支持的实现动画的最高效的方式之一，在该方式下浏览器能够进行内部优化，因而不再需要所谓的黑科技、强制性的技巧和 requestAnimationFrame 方法。通过 WAAPI，我们可以很大程度上将交互动画从样式转移到 JS 上，将行为与表现分离。我们不再需要依赖很多的 DOM 技巧来控制动画的播放，比如直接赋值 CSS 属性或者切换类名。并且与简单、声明式的 CSS 不同，JS 允许我们动态地改变样式属性或播放选项。对需要构建自定义动画库和开发动画接口的开发者来说，WAAPI 可能是最酷的工具了。让我们来看看它都可以做什么。

Web Animation API非常的棒。除了能很好的支持平常动画之外。我发现还可以使用Promise、rAF和CSS Transition来重新创建它们，结果类似人体工程学。

这些特性在写这篇文章的时候还没有在任何的浏览器得到稳定的支持。但是，接下来要讨论的内容在Firefox Nightly中得到了支持，而且关键部分在Chrome Canary（开启Web实验性特性），所以我建议使用这些浏览器中的一个（在阅读本文时）。

早期在Web页面或Web应用中实现 Web动画 通常是使用JavaScript来完成。使用JavaScript创建动画非常灵活，但不能轻易地让浏览器通过硬件加速来优化动画，也不能将其连接到 布局 和 渲染 管道中。值得庆幸的是，自2007年Webkit团队引入的 CSS Animation 和 CSS Transition 克服了早期JavaScript动画实现的挑战。但是，CSS Animation和Transition也有很多的限制，特别是在 动态创建动画、控制动画的回放和监视动画生命周期方面等。不过，Web Animation API的出现，让开发者（特别是Web动画方面的开发者）看到了曙光。因为，Web Animation API引入了一种新的解决方案，它提供了CSS Animation和Transition的优化能力，同时还提供了早期基于JavaScript制作动画的API的灵活性。Web Animation API通过 **计时模型（Timing Mode）和动画模型（Animation Model）**提供对Web动画开发和控制。