Web Animations API 首次在 Chrome 36 中发布，可让您使用 JavaScript 轻松控制浏览器中的动画，并且也正在 Gecko 和 WebKit 中实现。
Chrome 50 引入了一些变更，以提高与其他浏览器的互操作性，并更好地遵循规范。这些变更包括：
- 取消活动
Animation.idpause()方法的状态更改- 弃用了在关键帧中使用带短划线的名称作为键
在 Chrome 51 中，其中一些更改已最终确定：
- 移除了关键帧中作为键的带短划线的名称
取消活动
Animation 接口包含用于取消动画的方法，该方法的名称很有趣，叫做 cancel()。Chrome 50 会在按规范调用该方法时触发取消事件，这会通过 oncancel 属性（如果已初始化）触发事件处理。
支持 Animation.id
使用 element.animate() 创建动画时，您可以传入多个属性。例如，下面是一个对对象的透明度进行动画处理的示例：
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
通过指定 id 属性，系统会在返回的 Animation 对象上设置该属性，这在您有大量 Animation 对象需要处理时，有助于调试内容。以下示例展示了如何为您实例化的动画指定 id：
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
pause() 方法的状态变化
pause() 方法用于暂停正在进行的动画。如果您使用 playState 属性检查动画的状态，则应在调用 paused() 方法后将其设置为 paused。在 50 之前的 Chrome 版本中，如果动画尚未开始，playState 属性会指示 idle；但现在，它会反映正确的状态，即 paused。
移除了关键帧中作为键的带短划线的名称
为了进一步遵循规范和其他实现，如果关键帧动画中的键使用了带短划线的名称，Chrome 50 会向控制台发送警告。正确的字符串是根据 CSS 属性到 IDL 属性的转换算法使用驼峰式命名法。
例如，CSS 属性 margin-left 要求您传入 marginLeft 作为键。
Chrome 51 完全移除了对带短划线的名称的支持，因此现在是时候根据规范更正所有现有内容的名称了。
摘要
这些更改使 Chrome 对 Web 动画的实现更接近其他浏览器的实现，并且更符合规范，这有助于简化网页内容创作，从而实现更好的互操作性。