paint-brush
Web Animations API Explainedby@mozilla
2,437 reads
2,437 reads

Web Animations API Explained

by Mozilla ContributorsApril 19th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The Web Animations API allows for synchronizing and timing changes to the presentation of a Web page. It does so by combining two models: the Timing Model and the Animation Model. API provides a common language for browsers and developers to describe animations on DOM elements. API adds some new features to document and element interfaces. API is a free software community founded in 1998 by members of Netscape. by Mozilla Contributors. API Explained: Explained. 2,333 reads and usage of the API.

Company Mentioned

Mention Thumbnail
featured image - Web Animations API Explained
Mozilla Contributors HackerNoon profile picture

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).

EffectTiming

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 the
document
.

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.

Element.getAnimations()

Returns an Array of

Animation
objects currently affecting an element or which are scheduled to do so in future.

Specifications

See also


Credits