从上一篇文章中我们快速的了解了Web Animation API能做什么，也能使用Web Animation API制作类似CSS3 Animation实现的动效。但到目前为止，也仅仅就如此，并没有看到Web Animation API比CSS Animation有任何优势之处。那在这篇文章中，咱们来看看Web Animation API和CSS Animation明显性的区别。

当你调用element.animate(),会返回一个AnimationPlayer对象，然后动画开始播放。比如下面这样的一个示例：

假设将上面的动画赋值给一个变量player，我们就可以返回动画的方法(methods)、属性(Poperties)和Promises。

var player = eleAnime.animate(animeKeyframes, animeOptions);
console.log(player)

打印出来的结果如下图所示：

console.log(player.effect);

console.log(player.effect.timing);

掌握了其中的方法、属性等使用，将会发现Web Animation API的强大之处，也能更好的理解Web Animation API比CSS Animation有跟更强大的优势。接下来，一起来看看其方法和属性。

WAAPI属性

WAAPI对应的属性主要有：

• Animation.currentTime: 动画播放(runing)或者停止(paused)的当前时间。如果动画没有timeline，动画会停置或者不会播放。它的值是null
• Animation.effect: 获取或设置动画的KeyframeEffect
• Animation.id: 获取或设置字符串，用来识别动画，有点类似于@keyframes animationName中的animationName
• Animation.playbackRate:获取或设置动画的播放速度
• Animation.startTime:获取或设置一个动画开始播放的