Animation

Animation interface of the Web Animations API represents a single animation player and provides playback controls and a timeline for an animation node or source.

构造函数

Animation()
Creates a new Animation object instance.

特性

Animation.currentTime
The current time value of the animation in milliseconds, whether running or paused. If the animation lacks a timeline , is inactive or hasn't been played yet, its value is null .
Animation.effect
Gets and sets the AnimationEffectReadOnly associated with this animation. This will usually be a KeyframeEffect 对象。
Animation.finished 只读
Returns the current finished Promise for this animation.
Animation.id
Gets and sets the String used to identify the animation.
Animation.pending 只读
Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
Animation.playState 只读
Returns an enumerated value describing the playback state of an animation.
Animation.playbackRate
Gets or sets the playback rate of the animation.
Animation.ready 只读
Returns the current ready Promise for this animation.
animation.replaceState
Returns the replace state of the animation. This will be active if the animation has been replaced, or persisted if Animation.persist() has been invoked on it.
Animation.startTime
Gets or sets the scheduled time when an animation's playback should begin.
Animation.timeline
Gets or sets the timeline associated with this animation.

事件处理程序

Animation.oncancel
Gets and sets the event handler for the cancel 事件。
Animation.onfinish
Gets and sets the event handler for the finish 事件。
animation.onremove
Allows you to set and run an event handler that fires when the animation is removed (i.e., put into an active replace state).

方法

Animation.cancel()
Clears all keyframeEffects caused by this animation and aborts its playback.
animation.commitStyles()
Commits the end styling state of an animation to the element being animated, even after that animation has been removed. It will cause the end styling state to be written to the element being animated, in the form of properties inside a style 属性。
Animation.finish()
Seeks either end of an animation, depending on whether the animation is playing or reversing.
Animation.pause()
Suspends playing of an animation.
animation.persist()
Explicitly persists an animation, when it would otherwise be removed due to the browser's Automatically removing filling animations behavior.
Animation.play()
Starts or resumes playing of an animation, or begins the animation again if it previously finished.
Animation.reverse()
Reverses playback direction, stopping at the start of the animation. If the animation is finished or unplayed, it will play from end to beginning.
Animation.updatePlaybackRate()
Sets the speed of an animation after first synchronizing its playback position.

Automatically removing filling animations

It is possible to trigger a large number of animations on the same element. If they are indefinite (i.e., forwards-filling), this can result in a huge animations list, which could create a memory leak. For this reason, modern browsers have implemented the part of the Web Animations spec that automatically removes overriding forward filling animations, unless the developer explicitly specifies to keep them.

You can see this in action in our simple replace indefinite animations demo . The related JavaScript features are:

  • animation.commitStyles() for commiting the end styling state of an animation to the element being animated, even after that animation has been removed.
  • animation.onremove for setting and running an event handler that fires when the animation is removed (i.e., put into an active replace state).
  • animation.persist() for when you explicitly want an animations to be retained.
  • animation.replaceState to return the replace state of the animation. This will be active if the animation has been removed, or persisted if persist() has been invoked.

Accessibility concerns

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine, and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

规范

规范 状态 Comment
Web 动画
The definition of 'Animation' in that specification.
工作草案 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Animation
Chrome 44
44
不支持 39 — 44
Alternate Name
Alternate Name Uses the non-standard name: AnimationPlayer
Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari 13.1 WebView Android 44
44
不支持 39 — 44
Alternate Name
Alternate Name Uses the non-standard name: AnimationPlayer
Chrome Android 44
44
不支持 39 — 44
Alternate Name
Alternate Name Uses the non-standard name: AnimationPlayer
Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS 13.4 Samsung Internet Android 4.0
Animation() 构造函数
Chrome 61 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 48 Safari No WebView Android 61 Chrome Android 61 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 45 Safari iOS No Samsung Internet Android 8.0
cancel
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
commitStyles
Chrome No
不支持 No
Currently Chrome Canary only
Edge No Firefox 75 IE No Opera No Safari 13.1 WebView Android No Chrome Android No
不支持 No
Currently Chrome Canary only
Firefox Android No Opera Android No Safari iOS 部分支持 13.4
部分支持 13.4
Passes 13/27 web platform tests .
Samsung Internet Android No
currentTime
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
effect
Chrome No Edge No Firefox 63
63
48
Disabled
This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.
Disabled From version 48: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 63
63
48
Disabled
This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.
Disabled From version 48: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS No Samsung Internet Android No
finish
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
finished
Chrome No Edge No Firefox 63
63
46
Disabled
Disabled From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 63
63
46
Disabled
Disabled From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS No Samsung Internet Android No
id
Chrome 50 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 37 Safari No WebView Android 50 Chrome Android 50 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 37 Safari iOS No Samsung Internet Android 5.0
oncancel
Chrome 50 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 37 Safari No WebView Android 50 Chrome Android 50 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 37 Safari iOS No Samsung Internet Android 5.0
onfinish
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
onremove
Chrome No
不支持 No
Currently Chrome Canary only
Edge No Firefox 75 IE No Opera No Safari 13.1 WebView Android No Chrome Android No
不支持 No
Currently Chrome Canary only
Firefox Android No Opera Android No Safari iOS 13.4 Samsung Internet Android No
pause
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
pending
Chrome No Edge No Firefox 59
59
Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState .
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 59
59
Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState .
Opera Android No Safari iOS No Samsung Internet Android No
persist
Chrome No
不支持 No
Currently Chrome Canary only
Edge No Firefox 75 IE No Opera No Safari 13.1 WebView Android No Chrome Android No
不支持 No
Currently Chrome Canary only
Firefox Android No Opera Android No Safari iOS 13.4 Samsung Internet Android No
play
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
playbackRate
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
playState
Chrome 39
39
Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused .
Edge ≤79 Firefox 48
48
Prior to Firefox 59, this property returned pending for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate Animation.pending property. This reflects recent changes to the specification.
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26
26
Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused .
Safari No WebView Android 39
39
Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused .
Chrome Android 39
39
Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused .
Firefox Android 48
48
Prior to Firefox 59, this property returned pending for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate Animation.pending property. This reflects recent changes to the specification.
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26
26
Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused .
Safari iOS No Samsung Internet Android 4.0
4.0
Before Samsung Internet 5.0/Opera 37, this property returned idle for an animation that had not yet started. Starting with Samsung Internet 5.0/Opera 37, it shows paused .
ready
Chrome No Edge No Firefox 63
63
46
Disabled
Disabled From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 63
63
46
Disabled
Disabled From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS No Samsung Internet Android No
Browsers automatically remove indefinite filling animations .
Chrome No
不支持 No
Currently Chrome Canary only
Edge No Firefox 75 IE No Opera No Safari 13.1 WebView Android No Chrome Android No
不支持 No
Currently Chrome Canary only
Firefox Android No Opera Android No Safari iOS 13.4 Samsung Internet Android No
replaceState
Chrome No
不支持 No
Currently Chrome Canary only
Edge No Firefox 75 IE No Opera No Safari 13.1 WebView Android No Chrome Android No
不支持 No
Currently Chrome Canary only
Firefox Android No Opera Android No Safari iOS 13.4 Samsung Internet Android No
reverse
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
startTime
Chrome 39 Edge ≤79 Firefox 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera 26 Safari No WebView Android 39 Chrome Android 39 Firefox Android 48
48
不支持 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android 26 Safari iOS No Samsung Internet Android 4.0
timeline
Chrome No
不支持 No
Currently Chrome Canary only
Edge No Firefox 75
75
Currently only the getter is supported
63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
不支持 48 — 63
Disabled
This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.
Disabled From version 48 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari 13.1
13.1
Currently only the getter is supported
WebView Android No Chrome Android No
不支持 No
Currently Chrome Canary only
Firefox Android 63
Disabled
63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
不支持 48 — 63
Disabled
This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.
Disabled From version 48 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS 13.4
13.4
Currently only the getter is supported
Samsung Internet Android No
updatePlaybackRate
Chrome No Edge No Firefox 60 IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 60 Opera Android No Safari iOS No Samsung Internet Android No

图例

完整支持
完整支持
部分支持
部分支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。
使用非标名称。

另请参阅