这是 Web Animations API 入门教程系列的总结部分。我在2016年6月更新了系列内容，因为Chrome和Firefox都推出了主要更新（以及一些小规格更改）。如果您有想法或问题，或看到我已经误解了该规范，请在Twitter上与@dancwilson联系。
2014年夏天，Google宣布通过Polymer在网页中展示Material设计…使用polyfill技术支持即将推出的标准Web Animations API。
我没有听说过这个API，但是我很感兴趣，特别是因为它谈到了MotionPath(运动路径)效果。这还没有实现（你会在第5部分发现这是什么），但是它的目标是提供一种组合CSS，JS和SVG的动画方式，让我感兴趣。一年以后，Chrome和Firefox开始实施，polyfill的进步是稳定的，现在是认真看待它的时候了。
但是很少有人在谈论WAAPI！我希望开始一系列突出浏览器（和polyfill）功能的帖子，探索为什么我们想要这个API，并找出细微差别。希望我们也能让更多的人讨论和使用这个API。
什么是Web动画API？
我们将通过弄清楚它是什么，以及它正在努力完成的事情来开始这个探索。
动画在过去的十年中已经取得了很好的进展，并提供了很好的CSS支持和新增功能来改进JavaScript。但是，每种动画方法仍然对他们所提供的所有优点都有一些缺陷。
- CSS具有用于平滑过渡的硬件加速，并且浏览器内置了支持，但规则在CSS中声明，并且需要跳过JavaScript环节以获得动态更改的值。
requestAnimationFrame有很好的支持，让浏览器在动画时进行优化，但如果还有很多其他JavaScript运行，它仍然可以挂起。它也经常需要更多的数学知识来获得定时。setInterval被很多开发人员用来做动画，但它是不精确的，可以导致动画卡顿。jQuery.animate()被其他一些开发人员推荐制作动画，但往往有性能问题。- 诸如Velocity和GreenSock（GSAP）这样的类库可以提高JavaScript的性能，并且在许多情况下已经被测试成为最好的。然而，他们仍然需要维护和加载额外的库。
一般来说，我们喜欢浏览器的支持尽可能多，直接被优化过的方式。现在浏览器有document.querySelector，因为我们看到jQuery提供选择DOM元素的值。理想情况下，我们可以在浏览器级别包装尽可能多的动画控件。这些库可以专注于提供更新的功能，并且可以持续迭代。
Web Animations API尝试这样做。它旨在带来CSS性能的强大，增加了JavaScript的好处和灵活性（以及SVG动画，我们将在以后的一篇文章中讨论），并将其留给浏览器使其运行良好。
让我们通过添加新的东西来解决这个问题！
在以前的工作中，我们收到一封电子邮件，表示他们知道我们有太多的地方可以查看公司公告 - 电子邮件，办公室的监视器，Yammer，Google Chat和Intranet / wiki。所以要解决他们宣布的问题，他们正在添加一个博客。
我第一次听到有关Web Animations API 和我听到我公司新增博客的想法一样 - 这只会使事情变得更糟。果然，博客没有集中任何东西，它只是添加了一个地方，我们必须查看新闻，然后不了了之了。
这感觉不一样。 审查规范（第一次我在这个程度上真的做到这一点）显示了对此的关注。这并不意味着取代现有的行为（尽管有些浏览器似乎已经不赞成某些行为），而是将各种方式联合起来，并允许他们进行交互。语法类似于CSS，但添加了变量，控制和完成回调的选项。
下一节…
因此，Web Animations API是新的，并且开始实现（目前在Chrome和Firefox中），除了拥有一个polyfill。下次我们实际上会开始看看它为开发者提供了什么…有例子！
查看本系列的其余部分：
【翻译原文】：http://danielcwilson.com/blog/2015/07/animations-intro/