Animation

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The Animation interface 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
Is the current time of the animation if it is running, or null if the animation is paused.
Animation.effect
Is
Animation.finished Read only
Returns
Animation.playState Read only
Returns an enumerated value describing the playback state of an animation.
Animation.playbackRate
Returns or sets the playback rate of the animation.
Animation.ready Read only
Returns
Animation.effect
Is
Animation.startTime
Returns or sets the scheduled time when an animation's playback should begin.
Animation.timeline
Is

Methods

Animation.cancel()
Clears
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()
Moves the animation backwards, stopping at the start of the animation.

Specifications

Specification Status Comment
Web Animations
The definition of 'Animation' in that specification.
Working Draft Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 39.0 [1] 40.0 (40.0) [2] No support No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) [1] 40.0 (40.0) [2] No support No support No support

[1] Implemented as AnimationPlayer (interface name in an early version of the spec).

[2] Before Firefox 40, it was available as AnimationPlayer. In both cases, you need to set the preference dom.animations-api.core.enabled to be able to use it.

 

Document Tags and Contributors

 Contributors to this page: rachelnabors, teoli, fscholz, jpmedley
 Last updated by: rachelnabors,