Web Animations API
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. To get more information on the concepts behind the API and how to use it, read Using the Web Animations API.
Web Animations interfaces
- Provides playback controls and a timeline for an animation node or source. Can take an object created with the
- Describes sets of animatable properties and values, called keyframes and their timing options. These can then be played using the
- Represents the timeline of animation. This interface exists to define timeline features (inherited by
DocumentTimelineand future timeline objects) and is not itself accessed by developers.
- Represents animation timelines, including the default document timeline (accessed via
- An object containing timing properties returned by the
timingattribute of a
KeyframeEffect. It inherits its properties from
AnimationEffectTimingReadOnly, but in a non-read only form.
- Represents a sequence of keyframes that can be shared between
KeyframeEffectobjects. By using
KeyframeEffectobjects can re-use the same keyframes without paying the cost of parsing them multiple times.
KeyframeEffect.KeyframeEffect()all accept an optional dictionary object of timing properties.
Extensions to other interfaces
The Web Animations API adds some new features to
Extensions to the
DocumentTimelineobject representing the default document timeline.
- Returns an Array of
Animationobjects currently in effect on elements in the
Extensions to the
- A shortcut method for creating and playing an animation on an element. It returns the created
Web Animations read-only interfaces
The following interfaces are included in the spec for purposes such as defining features used in multiple other places. 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.
- A dictionary object of timing properties, which are inherited by the mutable
AnimationEffectTiminginterface associated with
- Defines current and future "Animation Effects" like
KeyframeEffect, which can be passed to
Animation.Animationobjects for playing, and
KeyframeEffectReadOnlywhich is used by
KeyframeEffect(inherited by CSS Animations and Transitions).
- Describes sets of animatable properties and values that can be played using the
Animation.Animation()constructor, and which are inherited by
|Web Animations||Working Draft||Initial definition|
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Basic support (Element.animate())||36.0
||48 (48)||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||48.0 (48)||No support||No support||No support||No support||42.0|
- Using the Web Animations API
- Web Animations demos
- Firefox's current implementation: AreWeAnimatedYet
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.