Web API 之 — Web Animations

现代的前端，在页面上做动画，已经是家常便饭。浏览器的渲染性能也越来越好，并且还逐渐提供了一系列的 Web Animations API。此 API 让开发者可以使用 js 来创建动画，相比之前使用 css 做动画会方便很多，同时相比以前传统的用 js 做的动画会更加高效，并且相信未来此 API 的能力会越来越大。

Web Animations 可查看 w3c 的规范文档。在 caniuse 上，可查看浏览器的支持情况，如下：

可看到，目前主流浏览器均已支持此 API 的基本功能。下面我们就来学习一下此 API 的基本用法。

创建动画

创建动画，使用 animate()方法。语法如下：

var animation = element.animate(keyframes, options);

该方法接收两个参数。

第一个参数是 keyframes，keyframes 可以是一个 keyframe 对象组成的数组，也可以是一个 css 属性组成的对象，每个属性对应的值是 cs