Web动画API教程3：多个动画
这是介绍浏览器中web动画API的系列教程的第三篇。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在Twitter给我留言吧~@dancwilson
在关于AnimationPlayer和时间轴的讨论之后，我们来看看多动画和多player吧。
给一个元素添加多个动画
在这个示例中，每个矩形被应用了三个动画（其中包括变换、透明度和颜色）。你可以给一个元素多次调用animate()，类似CSS中的多动画。
使用的CSS：
#toAnimate {
animation: pulse 1s, activate 3000ms, have-fun-with-it 2.5s;
}
@keyframes pulse { /* ... */ }
@keyframes activate { /* ... */ }
@keyframes have-fun-with-it { /* ... */ }
使用Web动画API：
var animated = document.getElementById('toAnimate');
var pulseKeyframes, //定义关键帧变量
activateKeyframes,
haveFunKeyframes;
var pulse = animated.animate(pulseKeyframes, 1000); //第二个参数是持续时间的有效简写
var activate = animated.animate(activateKeyframes, 3000);
var haveFunWithIt = animated.animate(haveFunKeyframes, 2500);
使用Web动画API，它可以创建三个AnimationPlayer，每个都可以暂停、播放、结束、取消，也可以通过时间轴或播放速率来进行控制。
获取AnimationPlayers
所以你已经开始了一个动画并且正在播放，但是当你给元素调用animate()函数的时候，没有获取到AnimationPlayer的引用。这下该怎么办呢？
Web动画API创建默认时间轴，并且将它直接作为文档的属性使用：document.timeline。它目前只在Firefox Nightly和polyfill中可以使用。关于这块有非常多的内容，但是我们现在先看某个具体的方法。
var players = document.timeline.getAnimations();
//返回所有有效动画的数组（不是finished也不是canceled的）
在CodePen示例中，你会看到这些点是以随机的持续时间、延迟和无限长的变换在移动的。“Pause All”的按钮调用了getAnimations()函数，循环访问所有返回的player，然后一个一个将它们暂停。
尝试编辑CodePen，把iterations的值从Infinity修改成1，然后先让动画播放，再按下暂停键。你会发现getAnimations()没有返回player。这是因为所有的动画都已经finished，这个方法只返回running/pause状态的动画。
接下来
在下一篇文章中，我们会看看创建一个WAAPI动画的不同方法（因为不是只有element.animate可以创建动画）。提示：document.timeline会经常露面的。
本文根据@Dancwilson的《Web Animations API Tutorial Part 3: Multiple Animations》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://danielcwilson.com/blog/2015/08/animations-part-3。
彦子
如需转载，烦请注明出处：https://www.fedev.cn/css3/web-animations-api-tutorial-part-3-multiple-animations.htmljordan retro 11 mens style