This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.
Concepts and usage
The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read Using the Web Animations API.
Web Animations interfaces
Animation
- Provides playback controls and a timeline for an animation node or source. Can take an object created with the
KeyframeEffect()
constructor. KeyframeEffect
- Describes sets of animatable properties and values, called keyframes and their timing options. These can then be played using the
Animation()
constructor. AnimationTimeline
- Represents the timeline of animation. This interface exists to define timeline features (inherited by
DocumentTimeline
and future timeline objects) and is not itself accessed by developers. AnimationEvent
- Actually part of CSS Animations.
DocumentTimeline
- Represents animation timelines, including the default document timeline (accessed using the
Document.timeline
property). AnimationEffectTiming
- An object containing timing properties returned by the
timing
attribute of aKeyframeEffect
. It inherits its properties fromAnimationEffectTimingReadOnly
, but in a non-read only form. AnimationEffectTimingProperties
Element.animate()
,KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, andKeyframeEffect.KeyframeEffect()
all accept an optional dictionary object of timing properties.
Extensions to other interfaces
The Web Animations API adds some new features to document
and element
.
Extensions to the Document
interface
document.timeline
- The
DocumentTimeline
object representing the default document timeline. document.getAnimations()
- Returns an Array of
Animation
objects currently in effect on elements in thedocument
. -
Extensions to the
Element
interface Element.animate()
- A shortcut method for creating and playing an animation on an element. It returns the created
Animation
object instance.
Web Animations read-only interfaces
The following interfaces are included in the spec for purposes such as defining features used in multiple other places, or to serve as bases for multiple interfaces which can all be used as values of the same properties. You wouldn't directly use these in web development work, but they may be interesting for library authors to understand how the technology works so their implementations can be more effective, or for browser engineers looking for an easier reference than the spec provides.
AnimationEffectTimingReadOnly
- A dictionary object of timing properties, which are inherited by the mutable
AnimationEffectTiming
interface associated withKeyframeEffect
. AnimationEffectReadOnly
- Defines current and future "Animation Effects" like
KeyframeEffect
, which can be passed toAnimation
objects for playing, andKeyframeEffectReadOnly
which is used byKeyframeEffect
(inherited by CSS Animations and Transitions). All values ofAnimation.effect
are of types based onAnimationEffectReadOnly
. KeyframeEffectReadOnly
- Describes sets of animatable properties and values that can be played using the
Animation()
constructor, and which are inherited byKeyframeEffect
.
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations | Working Draft | Initial definition |
Browser compatibility
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|
36.0[1] |
48 (48)[1] | No support |
29 |
No support |
(Yes) | No support[1] | No support | No support | No support |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | No support | 42.0 | 48.0 (48) | No support | No support | No support | 42.0 |
[1] Only a subset of the API is enabled. See the individual API members for shipping status.
See also
- Using the Web Animations API
- Web Animations demos
- Polyfill
- Firefox's current implementation: AreWeAnimatedYet