Search⌘ K
Home/
Courses/
Animations in Angular

Introduction to Web Animations API

An introduction to Web Animations API and an overview of its usage and browser support.

We'll cover the following...

Web Animations API, also known as WAAPI, is a native API for animation in JavaScript that provides a common language for browsers to interpret DOM elements’ animations.

The basic usage of WAAPI is similar to jQuery’s animate function. The animate function accepts two parameters to define its animations: a set of keyframes and the animation duration.

Let’s take a look at an example of how we can animate an element’s opacity from 0 to 1 using WAAPI in JavaScript.

Javascript (babel-node)
var element = document.getElementById("myElement");
element.animate([{ opacity: 0 }, { opacity: 1 }], 1000);

We first ...