在此页

• 构造函数
• 特性
• 方法
• 自动移除填充动画
• 可访问性关注
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

动画 接口在 Web 动画 API represents a single animation player and provides playback controls and a timeline for an animation node or source.

构造函数

Animation()

Creates a new 动画 对象实例。

特性

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

获取并设置 AnimationEffectReadOnly associated with this animation. This will usually be a KeyframeEffect 对象。

Animation.finished 只读

Returns the current finished Promise for this animation.

Animation.id

获取并设置 字符串 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()

清零所有 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 自动移除填充动画 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.

自动移除填充动画

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.

可访问性关注

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.

• Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
• An Introduction to the Reduced Motion Media Query | CSS-Tricks
• Responsive Design for Motion | WebKit
• MDN Understanding WCAG, Guideline 2.2 explanations
• Understanding Success Criterion 2.2.2  | W3C Understanding WCAG 2.0

规范

规范	状态	注释
Web 动画 在该规范中的 Animation 定义。	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
动画	Chrome 44 44 不支持 39 — 44 Alternate Name Alternate Name Uses the non-standard name: AnimationPlayer	Edge ≤79	Firefox 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	Opera Android 26	Safari iOS 13.4	Samsung Internet Android 4.0
Animation() 构造函数	Chrome 61	Edge ≤79	Firefox 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 48	Safari No	WebView Android 61	Chrome Android 61	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 45	Safari iOS No	Samsung Internet Android 8.0
cancel	Chrome 39	Edge ≤79	Firefox 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	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 ). 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 ). 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 ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 26	Safari iOS No	Samsung Internet Android 4.0
finished	Chrome No	Edge No	Firefox 63 63 Disabled ). To change preferences in Firefox, visit	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 63 63 Disabled ). To change preferences in Firefox, visit	Opera Android No	Safari iOS No	Samsung Internet Android No
id	Chrome 50	Edge ≤79	Firefox 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 37	Safari No	WebView Android 50	Chrome Android 50	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 37	Safari iOS No	Samsung Internet Android 5.0
oncancel	Chrome 50	Edge ≤79	Firefox 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 37	Safari No	WebView Android 50	Chrome Android 50	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 37	Safari iOS No	Samsung Internet Android 5.0
onfinish	Chrome 39	Edge ≤79	Firefox 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 26	Safari iOS No	Samsung Internet Android 4.0
playbackRate	Chrome 39	Edge ≤79	Firefox 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	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 Disabled ). To change preferences in Firefox, visit	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 63 63 Disabled ). To change preferences in Firefox, visit	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 ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 26	Safari iOS No	Samsung Internet Android 4.0
startTime	Chrome 39	Edge ≤79	Firefox 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera 26	Safari No	WebView Android 39	Chrome Android 39	Firefox Android 48 48 不支持 46 — 48 Disabled Disabled ). To change preferences in Firefox, visit	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 ). 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 ). 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

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

使用非标名称。

另请参阅

• Web 动画 API

元数据

• 最后修改： Jul 14, 2020

相关话题

1. Web 动画 API
2. 动画
3. 构造函数

   1. Animation()
4. 特性

   1. currentTime
   2. effect
   3. finished
   4. id
   5. oncancel
   6. onfinish
   7. onremove
   8. pending
   9. playbackRate
   10. playState
   11. ready
   12. replaceState
   13. startTime
   14. timeline
5. 方法

   1. cancel()
   2. commitStyles()
   3. finish()
   4. pause()
   5. persist()
   6. play()
   7. reverse()
   8. updatePlaybackRate()
6. Web 动画相关页面

   1. AnimationEffect
   2. AnimationEvent
   3. AnimationPlaybackEvent
   4. AnimationTimeline
   5. Document.getAnimations()
   6. Document.timeline
   7. DocumentTimeline
   8. EffectTiming
   9. Element.animate()
   10. KeyframeEffect