Animation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

Web 动画 API动画接口表示一个单个动画播放器并且提供用于一个动画节点或源的回放控制和一个时间轴。

构造函数

Animation()

创建一个新的 Animation 对象实例。

属性

Animation.currentTime

动画的当前时间值(以毫秒为单位),无论是正在运行还是已暂停。如果动画缺少timeline或尚未播放,其值为 null。

Animation.effect

获取或设置与此动画相关联的KeyframeEffect

Animation.finished 只读

返回此动画的当前完成的状态。

Animation.id

获取或设置用于标识动画的字符串。

Animation.playState 只读

返回描述动画播放状态的枚举值。

Animation.playbackRate

返回或设置动画的播放速率。

Animation.ready 只读

返回此动画的当前就绪状态。

Animation.startTime

获取或设置动画播放应开始的预定时间。

Animation.timeline

获取或设置与此动画相关联的timeline

事件处理程序

Animation.oncancel

获取并设置取消事件的事件处理程序。

Animation.onfinish

获取并设置完成事件的事件处理程序。

方法

Animation.cancel()

清除此动画的所有keyframeEffects,并中止播放。

Animation.finish()

设置动画中止播放。

Animation.pause()

暂停播放动画。

Animation.play()

开始或恢复播放动画,或者如果之前完成,则重新开始动画。

Animation.reverse()

反转播放动画,直到播放到动画开始时停止。如果动画完成或未播放,它将从头到尾播放。

规范

Specification
Web Animations
# the-animation-interface

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Animation
Animation() constructor
cancel
cancel event
commitStyles
currentTime
effect
finish
finish event
finished
id
overallProgress
Experimental
pause
pending
persist
play
playState
playbackRate
ready
remove event
Browsers automatically remove indefinite filling animations
replaceState
reverse
startTime
timeline
updatePlaybackRate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.