Draft
This page is not complete.
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 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.
Web Animations interfaces
Animation- Provides playback controls and a timeline for an animation node or source. Can take an object created with the
KeyframeEffect.KeyframeEffectconstructor. Element.animate()-
A shortcut method for creating and playing an animation on an element. It returns the created
Animationobject instance. KeyframeEffect- Describes sets of animatable properties and values, called keyframes and their timing options. These can then be played using the
Animation.Animation()constructor.
Extensions to the Document interface
Attributes
document.timeline- The
DocumentTimelineobject representing the default document timeline. -
Methods
document.getAnimations()-
Returns an Array of
Animationobjects currently in effect on elements in thedocument.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Web Animations | Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 42.0 |
39 (39) 34 behind pref |
No support |
29 |
No support |
| Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | No support | 42.0 | No support | No support | No support | No support | No support | 42.0 |
See also
- Polyfill
- Firefox's current implementation: AreWeAnimatedYet