Search⌘ K
Home
Courses
Animations in Angular

Introduction to Web Animations API

Explore the fundamentals of the Web Animations API (WAAPI) in this lesson. Learn how to create dynamic animations using keyframes and control animation playback with JavaScript. Understand the benefits of WAAPI over CSS animations and how it integrates into web development.

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