转载自http://www.w3cplus.com/animation/web-animations-learning-to-love-the-api.html
如果你使用过SVG，你应该知道可以使用SMIL给SVG添加动画。CSS Transitions和keyframes动画都可以操作CSS属性来添加动画。requestAnimationFrame() 使得浏览器可以在下一帧执行之前，请求一个动作。
但是每一中动画技术都不是完美的，各自有各自的问题。
现代浏览器正在逐步淘汰SMIL。Chrome也长时间多次表示要抛弃SMIL，而且既然Blink要改，Opera同理；IE11和Edge则从来都没有实现这块，我还没在Firefox中查找关于SMIL的支持情况。有一个SMIL Polyfill——Fake SMILE，但是它对于开发者期望它执行以及用在实际生产中是否合理？
关于SMIL详解，可以移步张鑫旭老师的博客文章 (づ￣ 3￣)づ。
Transitions和animations一直都处在需要添加前缀的麻烦中。
浏览器厂商有时会在实验或非标准的CSS属性中添加前缀，所以开发者可以进行试验，但在标准进程中浏览器行为的改变并不会破坏代码。开发者应该等到引入无前缀的属性，直到浏览器行为标准化。 前缀(
-webkit-，-moz-，-o-，-ms-)参考https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix。
供应商前缀的问题是，为了支持尽可能更广泛的用户，它们很少会被抛弃。理论上当一项技术完全标准化的时候，浏览器厂商应该（或者说，必须）抛弃前缀，但是它们只针对当前版本做这样的支持，旧版本还是需要继续在代码中添加前缀。
所以，在定义CSS动画时，我们就必须像下面这样，添加不同的浏览器前缀以获得全面的支持：
@-moz-keyframes identifier {
/* For Firefox */
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
@-webkit-keyframes identifier {
/* Chrome, Opera and Safari */
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
@keyframes identifier {
/* Standards compliant */
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
所以我们需要添加-ms前缀来覆盖微软系列的浏览器，以及-o来覆盖旧Opera浏览器，即Opera内核换成Blink之前的版本。
这就是Autoprefixer插件或好的自动化构建工具出世的原因，方便我们编写代码。
requestAnimationFrame()是一个非常棒的API，但是它所有的脚本都是在页面跑的，你只有16.6ms的时间将一切搞定，以让next frame加入。如果因为一些原因，脚本没有在规定时间内完成它们的工作，我们在动画方面就会有些紧张，缓慢和迟钝的脚本会阻塞页面上的一些活动。
了解Web动画API
Web动画API（WAAPI）是一个新的JavaScript API，旨在规范Web上创建动画的方式。我建议取代SMIL（这也是为什么SMIL会在Chrome和Opera中被抛弃的原因之一）和支持CSS Transitions及animations。
Alex Danilo在Google开发者大会介绍了Web动画API（WAAPI）。这是一个高水平的关于API的概述，关于它如何工作以及可以用于何处：
关于WAAPI的presentation，最让我着迷的是Rachel Nabors 2015年在SFHTML5的演讲。除了对Web animation非常多的激情，还给非技术观众做了相当好的讲解。
视频来自于YouTube，天朝同学浏览，请自备天梯。
所以现在我们对于WAAPI有了稍微更多的认识，接下来我们来看看如何使它工作。
它是如何工作的
这一节使用的是Dan Wilson的Web Animation API tutorial中的代码，中文译文见这里。 所有的Web动画实例都有3个组成部分。第一个部分是我们要添加动画的元素的
.animate()声明。
var player = document.getElementById(‘toAnimate‘).animate()
动画函数接受2个参数。第一个是一个KeyframeEffects数组，设置你想让动画发生的位置，和CSS中的@keyframes声明相似。当我们看完整的实例时，就会发现区别。
每个属性的值需要和你如何在JavaScript中使用element.style指定的相匹配，如透明度opacity接受数字number，而transform接受字符串string。
var player = document.getElementById(‘toAnimate‘).animate([
{ transform: ‘scale(1)‘, opacity: 1, offset: 0 },
{ transform: ‘scale(.5)‘, opacity: .5, offset: .3 }
{ transform: ‘scale(.667)‘, opacity: .667 },
{ transform: ‘scale(.6)‘, opacity: .6 }
‘], {});
第二个参数是一个时间函数列表。它会映射到CSS动画属性，尽管有时候名称略有不同。
var player = document.getElementById(‘toAnimate‘).animate([ ],
{
duration: 700, //毫秒
easing: ‘ease-in-out‘, //值为‘linear‘, 或贝塞尔曲线, 等等
delay: 10, //毫秒
iterations: Infinity, //或者为数字
direction: ‘alternate‘, //‘normal‘, ‘reverse‘, 等等.
fill: ‘forwards‘ //‘backwards‘, ‘both‘, ‘none‘, ‘auto‘
});
完整的实例如下：
var player = document.getElementById(‘toAnimate‘).animate([
{ transform: ‘scale(1)‘, opacity: 1, offset: 0 },
{ transform: ‘scale(.5)‘, opacity: .5, offset: .3 },
{ transform: ‘scale(.667)‘, opacity: .667 },
{ transform: ‘scale(.6)‘, opacity: .6 }
], {
duration: 700, //毫秒
easing: ‘ease-in-out‘, //值为‘linear‘, 或贝塞尔曲线, 等等
delay: 10, //毫秒
iterations: Infinity, //或者为数字
direction: ‘alternate‘, //‘normal‘, ‘reverse‘, 等等。
fill: ‘forwards‘ //‘backwards‘, ‘both‘, ‘none‘, ‘auto‘
});
相比之下，相同的动画，使用keyframes完成如下：
@keyframes emphasis {
0% {
transform: scale(1);
opacity: 1;
}
39% {
transform: scale(.5);
opacity: .5;
}
78.75% {
transform: scale(.667);
opacity: .667;
}
100% {
transform: scale(.6);
opacity: .6;
}
}
#toAnimate {
animation: emphasis 700ms ease-in-out 10ms infinite alternate forwards;
}这只是一点基础，我们将探讨更多语法方面，以及如何进一步提高。
浏览器支持情况？
很多新的JavaScript API，浏览器支持是不一致的。Chrome中对Web动画的支持是最好（原生）的（包括新Opera）；Firefox对于API支持有限（查阅are we animated yet?文档），而Edge则正在开发。Safari则例外，没有提供支持（目前或者计划，都没有）。
支持API意味着很多问题。没有浏览器能够支持完整的规范，但是你可以使用下面的页面来测试你的浏览器支持哪些方面的API。
测试你的浏览器是否支持WAAPI
需要的polyfill
对于不支持规范（即不支持全部的功能）的浏览器，Github上有polyfill。polyfill有几个版本，我对web-animation-next这个版本比较感兴趣。它支持目前规范中拟议的功能，以及规范中尚在讨论的功能。
我们的实例中的所有功能，在Chrome中或者通过polyfill可以原生工作。