我们来谈谈Web动画API:简介
这是介绍浏览器中Web动画API的系列教程的导言。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在Twitter给我留言吧~@dancwilson
大概一年之前，Google在Polymer上宣布了Material Design的存在，并且表示将使用polyfill作为即将到来的统一Web动画API标准。
我没有听说过这个API，但是我非常好奇，特别是它提到的MotionPath（运动路径）效果。目前尚未实现（你可以在这系列教程的Part 5中找到相关内容），但是它的目标是提供一种统一CSS、JS和SVG的方法来实现动画，这让我非常感兴趣。一年之后Chrome和Firefox已经开始实现这块内容，polyfill的进展非常平稳，所以是时候来认真研究一下它了。
但是现在很少人会讨论WAAPI了。我希望能够通过一系列文章来强调现在浏览器原生提供支持的功能（包括polyfill），探索为什么我们需要这个API，并找出它的厉害之处。我们也希望能够有越来越多的人参与讨论，并一起为这个API的实现而努力。
什么是统一web动画API？
我们在开始这次探索之前，先弄清楚它是什么，以及它到底能实现什么。
动画在过去的五年里发展得很好，因为强大的CSS支持以及JavaScript新增内容的提升。但是每一种实现动画的方法，都有其缺点和优点。
- CSS动画因为有硬件加速，所以过渡平滑，而且CSS动画的支持内置在浏览器中，但是规则是在CSS中声明的，需要通过JavaScript来实现值的动态变化。
requestAnimationFrame有良好的支持，并在动画中允许浏览器优化，但是它会被中断——如果有很多其它的javascript在跑的时候。而且，它往往还需要数学计算来获取倒计时。setInterval是很多开发人员进入动画世界的大门，但是它并不精确，而且可能导致结结巴巴的动画效果。jQuery.animate()也让一些其它的开发者进入了动画大世界，但是经常会有性能问题。- 库的话如Velocity和GreenSock (GSAP)完善了JavaScript性能，而且经过测试，在很多情况下是最好的选择。但是，它们还是需要维护和加载外部库。
总的来说，只要浏览器的支持尽可能的给力，而且还可以优化的话，我们就喜欢。浏览器现在有document.querySelector，因为我们看到了jQuery提供的选择DOM元素的值。所以库现在已经进入到原生浏览器中了。理想情况下，我们可以在浏览器级别打包尽可能多的动画控件放进去。这些库可以专注于提供新特性，还会自动更新。
统一Web动画API就是在试图做到这一点。它的目标是既有CSS的性能优势，又有JavaScript的优点和灵活性（还有SVG动画，我们会在后面的文章中进行讨论），然后把它赋给浏览器，使其工作得更好。
让我们加点新内容解决这个问题吧!
在以前的工作中，我们曾收到一封邮件，表示他们知道我们有很多地方可以检查公司通告——邮箱、办公室的监控器、Yammer、Google Chat以及内部网/wiki。所以为了解决他们提到的问题，他们建立了一个博客。
我在第一次听说统一Web动画API的时候也是同样的想法，我听说我的公司建立了博客——这只会让事情变得更糟糕。结果确实，博客并没有收集到任何有用的东西，它只是增加了一个我们检查消息的地方，它最终还是灭亡了。
不过这次感觉并不一样。重复查看规范（我第一次认真到了这个程度）说明我已经把注意力放在这上边了。它并不是说要取代现有的行为（尽管有些浏览器似乎一直不开心），而是要团结各种方式，甚至让它们进行互动。语法和CSS相似，但是增加了变量、控件和结束回调的选项。
接下来
统一web动画API还是新内容，并开始在实现中（目前在Chrome和Firefox中），除了拥有polyfill之外。下次我们就会真正开始看看它给开发者们提供了什么内容，包括一些具体的实例~
本文根据@Dancwilson的《我们来谈谈Web动画API:简介》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://danielcwilson.com/blog/2015/07/animations-intro/。
彦子
如需转载，烦请注明出处：https://www.fedev.cn/css3/animations-intro.htmlAir Max 90 LTHR Suede