Animation - 表示动画播放器
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Animation 是 Web Animations API 的接口，表示动画播放器，并提供播放控制和动画节点或源的时间轴。
构造函数
Animation()
创建一个新的 Animation 对象实例。
属性
Animation.currentTime
表示动画的当前时间值（以毫秒为单位），无论当前是运行还是暂停。如果动画缺少 timeline，处于非活动状态或尚未播放，则其值为 null。
Animation.effect
获取或设置与此动画关联的 AnimationEffectReadOnly。它通常是一个 KeyframeEffect 对象。
Animation.finished 只读
返回此动画的当前完成的 Promise。
Animation.id
一个 String，用于获取或设置动画的标识。
Animation.pending 只读
表示动画当前是否正在等待异步操作，例如启动播放或暂停正在运行的动画。
Animation.playState 只读
返回描述动画播放状态的枚举值。
Animation.playbackRate
获取或设置动画的播放速率。
Animation.ready 只读
返回此动画的当前准备好的 Promise。
animation.replaceState
返回动画的替换状态。如果已替换动画，则将是 active，如果已调用 Animation.persist()，则将是 persisted。
Animation.startTime
获取或设置动画开始播放的预定时间。
Animation.timeline
获取或设置与此动画关联的 timeline。
事件处理程序
Animation.oncancel
获取或设置 cancel 事件的事件处理程序。
Animation.onfinish
获取或设置 finish 事件的事件处理程序。
animation.onremove
允许您设置并运行一个事件处理程序，该事件处理程序在删除动画（即处于 active 替换状态）时触发。
方法
Animation.cancel()
清除此动画引起的所有 keyframeEffects 并中止播放。
animation.commitStyles()
即使已删除动画，也将动画的最终样式状态提交给要动画的元素。它将以 style 属性内的属性形式将最终样式状态写入正在动画的元素。
Animation.finish()
根据动画是播放还是反转来设置动画的结尾。
Animation.pause()
暂停播放动画。
animation.persist()
明确保留动画，否则由于浏览器的自动删除填充动画行为而将其删除。
Animation.play()
开始或继续播放动画，或者如果先前已经完成，则重新开始播放动画。
Animation.reverse()
反转播放方向，在动画开始时停止。如果动画完成或未播放，它将从头到尾播放。
Animation.updatePlaybackRate()
设置动画在首次同步播放位置后的速度。
自动删除填充动画
由于可以在同一个元素上触发大量动画，如果它们是不确定的（即，前向填充），则可能会导致动画列表很大，从而造成内存泄漏。因此，现代的浏览器已经实现了 Web 动画规范的一部分，该部分会自动删除覆盖的前向填充动画，除非开发人员明确指定保留它们。
您可以在我们简单的替换不定动画演示中看到这一点。相关的 JavaScript 功能包括：
animation.commitStyles()用于将动画的最终样式状态提交给要动画的元素，即使该动画已被删除也是如此。animation.onremove用于设置和运行事件处理程序，该事件处理程序在删除动画（即处于active替换状态）时触发。animation.persist()，用于明确希望保留动画时使用。animation.replaceState返回动画的替换状态。如果已删除动画，则将是active，如果已调用persist()，则将是persisted。
无障碍问题
动画的闪烁和闪烁可能会对诸如注意力缺陷多动障碍（ADHD）等认知问题的人产生问题。此外，某些类型的运动可能会触发前庭疾病，癫痫和偏头痛，以及局部过敏。
考虑提供一种暂停或禁用动画的机制，以及使用减少运动媒体查询 为那些表示不喜欢动画的用户提供一个更好的体验。
- 设计更安全的 Web 动画以提高动作敏感度
- 简化运动媒体查询简介 | CSS-Tricks
- 运动响应设计 | WebKit
- 了解 WCAG，准则 2.2 的解释
- 了解成功标准 2.2.2 | W3C Understanding
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| Web Animations Animation 的定义 |
工作草案 | 初始定义 |
桌面浏览器兼容性
| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础支持 | 44 39 — 441 | 79 | 48 46 — 48 | 不支持 | 26 | 13.1 |
Animation() 构造函数 | 61 | 79 | 48 46 — 48 | 不支持 | 48 | 不支持 |
cancel | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
commitStyles | 不支持2 | 不支持 | 75 | 不支持 | 不支持 | 13.1 |
currentTime | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
effect | 75 | 79 | 63 484 | 不支持 | 62 | 不支持 |
finish | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
finished | 不支持 | 不支持 | 63 46 | 不支持 | 不支持 | 不支持 |
id | 50 | 79 | 48 46 — 48 | 不支持 | 37 | 不支持 |
oncancel | 50 | 79 | 48 46 — 48 | 不支持 | 37 | 不支持 |
onfinish | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
onremove | 不支持2 | 不支持 | 75 | 不支持 | 不支持 | 13.1 |
pause | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
pending | 不支持 | 不支持 | 595 | 不支持 | 不支持 | 不支持 |
persist | 不支持2 | 不支持 | 75 | 不支持 | 不支持 | 13.1 |
play | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
playbackRate | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
playState | 396 | 79 | 487 46 — 48 | 不支持 | 266 | 不支持 |
ready | 不支持 | 不支持 | 63 46 | 不支持 | 不支持 | 不支持 |
| Browsers automatically remove indefinite filling animations. | 不支持2 | 不支持 | 75 | 不支持 | 不支持 | 13.1 |
replaceState | 不支持2 | 不支持 | 75 | 不支持 | 不支持 | 13.1 |
reverse | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
startTime | 39 | 79 | 48 46 — 48 | 不支持 | 26 | 不支持 |
timeline | 不支持2 | 不支持 | 759 63 48 — 6310 | 不支持 | 不支持 | 13.19 |
updatePlaybackRate | 不支持 | 不支持 | 60 | 不支持 | 不支持 | 不支持 |
移动浏览器兼容性
| 特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| 基础支持 | 44 39 — 441 | 44 39 — 441 | 未知 | 48 46 — 48 | 未知 | 26 | 13.4 |
Animation() 构造函数 | 61 | 61 | 未知 | 48 46 — 48 | 未知 | 45 | 不支持 |
cancel | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
commitStyles | 不支持 | 不支持2 | 未知 | 不支持 | 未知 | 不支持 | 13.43 |
currentTime | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
effect | 75 | 75 | 未知 | 63 484 | 未知 | 54 | 不支持 |
finish | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
finished | 不支持 | 不支持 | 未知 | 63 46 | 未知 | 不支持 | 不支持 |
id | 50 | 50 | 未知 | 48 46 — 48 | 未知 | 37 | 不支持 |
oncancel | 50 | 50 | 未知 | 48 46 — 48 | 未知 | 37 | 不支持 |
onfinish | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
onremove | 不支持 | 不支持2 | 未知 | 不支持 | 未知 | 不支持 | 13.4 |
pause | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
pending | 不支持 | 不支持 | 未知 | 595 | 未知 | 不支持 | 不支持 |
persist | 不支持 | 不支持2 | 未知 | 不支持 | 未知 | 不支持 | 13.4 |
play | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
playbackRate | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
playState | 396 | 396 | 未知 | 487 46 — 48 | 未知 | 266 | 不支持 |
ready | 不支持 | 不支持 | 未知 | 63 46 | 未知 | 不支持 | 不支持 |
| Browsers automatically remove indefinite filling animations. | 不支持 | 不支持2 | 未知 | 不支持 | 未知 | 不支持 | 13.4 |
replaceState | 不支持 | 不支持2 | 未知 | 不支持 | 未知 | 不支持 | 13.4 |
reverse | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
startTime | 39 | 39 | 未知 | 48 46 — 48 | 未知 | 26 | 不支持 |
timeline | 不支持 | 不支持2 | 未知 | 63 48 — 6310 | 未知 | 不支持 | 13.49 |
updatePlaybackRate | 不支持 | 不支持 | 未知 | 60 | 未知 | 不支持 | 不支持 |
1. 通过 AnimationPlayer 支持。
2. Currently Chrome Canary only
3. Passes 13/27 web platform tests.
4. Firefox 48 支持此属性，但它是只读的。在 Firefox 51 中可写。
5. 在版本 59 之前，未处理状态由 Animation.playState 返回的 "pending" 值报告的。
6. 在 Chrome 50 / Opera 37 之前，此属性针对尚未开始的动画返回了 idle。从 Chrome 50 / Opera 37 开始，它返回了 paused。
7. 在 Firefox 59 之前，此属性针对具有不完整异步操作的动画返回 pending，但从 Firefox 59 开始，这由单独的 Animation.pending 属性表示的。这是对规范的最新更改。
8. 在 Samsung Internet 5.0 / Opera 37 之前，此属性针对尚未开始的动画返回了 idle 。从 Samsung Internet 5.0 / Opera 37 开始，它返回了 paused。
9. Currently only the getter is supported
10. Firefox 48 支持此属性，但它是只读的。在 Firefox 49 中变为可写。