This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The 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.
Constructor
Animation()
- Creates a new
Animation
object instance.
Properties
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 isnull
.
Animation.effect
- Gets and sets the
AnimationEffectReadOnly
associated with this animation. This will usually be aKeyframeEffect
object. Animation.finished
Read only- Returns the current finished Promise for this animation.
Animation.id
- Gets and sets the
String
used to identify the animation. Animation.pending
Read only- Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
Animation.playState
Read only- Returns an enumerated value describing the playback state of an animation.
Animation.playbackRate
- Gets or sets the playback rate of the animation.
Animation.ready
Read only- Returns the current ready Promise for this animation.
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.
Event handlers
Animation.oncancel
- Gets and sets the event handler for the
cancel
event. Animation.onfinish
- Gets and sets the event handler for the
finish
event.
Methods
Animation.cancel()
- Clears all
keyframeEffects
caused by this animation and aborts its playback.
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.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.
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'Animation' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Microsoft Edge | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 39 [1] | 48 (48) | ? | No support | 26 | No support |
Constructor | 61 | 48 (48) | ? | No support | 48 | No support |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 39 [1] | 39 [1] | 48.0 (48)[2][3] | No support | 26 | No support |
Constructor | 61 | 61 | 48.0 (48)[2][3] | No support | 48 | No support |
[1] Before Chrome 44, implemented as AnimationPlayer
(interface name in an early version of the spec).
Document Tags and Contributors
Tags:
Contributors to this page:
birtles,
jpmedley,
Machars,
Sheppy,
suzyh,
chrisdavidmills,
rachelnabors,
teoli,
fscholz
Last updated by:
birtles,