随着API规范已经制定好并且通过，运动路径motion path也先后出现了不同的形式。单方向最初看起来可能是Effect的形式（如上一篇中讨论的GroupEffect），但随后Motion Path作为一个CSS模块慢慢的一点一点地上位（在它的规范中）。

我们来继续我们关于Web动画API中多动画的探讨，讨论一下现在polyfill中提供的分组和序列功能。

在关于AnimationPlayer和时间轴的讨论之后，我们来看看多动画和多player吧。

现在我们已经知道如何使用统一Web动画API创建基本动画了，我们来谈谈动画状态及其控制、回调和时间轴。

我们已经初步了解了统一web动画API的内容，但是我们还没有真正去对规范的细节进行探讨，所以现在开始吧。WAAPI为你提供了比你用于CSS动画更多的控件，但是在了解它们之前，我们先打一下基础：如何使用这个API创建一个基本的动画？

大概一年之前，Google在Polymer上宣布了Material Design的存在，并且表示将使用polyfill作为即将到来的统一Web动画API标准。我没有听说过这个API，但是我非常好奇，特别是它提到的MotionPath（运动路径）效果。目前尚未实现（你可以在这系列教程的Part 5中找到相关内容），但是它的目标是提供一种统一CSS、JS和SVG的方法来实现动画，这让我非常感兴趣。一年之后Chrome和Firefox已经开始实现这块内容，polyfill的进展非常平稳，所以是时候来认真研究一下它了。

如果我告诉你存在一种图像格式和GIF一样，但它是矢量格式的？如果我告诉你这个动画的方向还可以反转？如果我告诉你可以直接拿一张普通的图像，然后让它里边的每一个不同的部分都单独地动起来，而且不同部分的速度也不一样？其实，这种图像格式就是SVG，而且已经存在，并不是我想象出来的，只是还需要一点点温柔的鼓励。

有一天,Harry Roberts有一段有关于他网站上的代码在twitter求教，如果有可能，在某些方面得到改善。Harry Roberts做的是使用keyframes的carousel动画，所以说使用一些数学计算是有可能得到相应改善。

这篇文章通过示例一步一步的告诉大家如何使用CSS来创建3D球体效果。并且如何利用CSS的box-shadow和渐变来给3D球体添加一些光泽效果，让球体更具像是在一个3D空间。并且配合CSS的animation让整个球体运动起来。通过上面的示例再次证明了，运用好了box-shadow和渐变能制作出各种各样的效果。

学会语法就可以制作 CSS 动画，但是要想做出动感、美观的动画，仅会语法是不够的。动画直接关系到用户体验，因此我们需要改进代码，从而找到正确的触发时机并掌握调试动画的方法。经过一番研究之后，我总结了一些有用的工具和方法。