The 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. Web Animations API 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 constructor. KeyframeEffect() KeyframeEffect Describes sets of animatable properties and values, called and their These can then be played using the constructor. keyframes timing options . Animation() AnimationTimeline Represents the timeline of animation. This interface exists to define timeline features (inherited by and future timeline objects) and is not itself accessed by developers. DocumentTimeline AnimationEvent Actually part of CSS Animations. DocumentTimeline Represents animation timelines, including the default document timeline (accessed using the property). Document.timeline EffectTiming , Element.animate() , KeyframeEffectReadOnly.KeyframeEffectReadOnly() and KeyframeEffect.KeyframeEffect( ) all accept an optional dictionary object of timing properties. Extensions to other interfaces The Web Animations API adds some new features to and . document element Extensions to the Document interface document.timeline The object representing the default document timeline. DocumentTimeline document.getAnimations() Returns an Array of objects currently in effect on elements in the . Animation document Extensions to the Element interface Element.animate() A shortcut method for creating and playing an animation on an element. It returns the created object instance. Animation Element.getAnimations() Returns an Array of objects currently affecting an element or which are scheduled to do so in future. Animation Specifications See also Using the Web Animations API Web Animations demos Polyfill Firefox's current implementation: AreWeAnimatedYet Browser support test Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API Published under license Open CC Attribution ShareAlike 3.0

Mozilla

Web Animations API Explained

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

10 Best Anime Websites to Stream & Download [Free + Paid]

A Quick Introduction to the Resize Observer API

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

10 Best Anime Websites to Stream & Download [Free + Paid]

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps