How WAAPI works

WAAPI moves animation creation from CSS to JavaScript. Creating animations with JavaScript has the added advantage of creating more dynamic animations when compared to its CSS counterpart.

Defining keyframes for CSS animations also applies to WAAPI, which provides all the functionalities of CSS animations, albeit with a slightly different syntax.

Let’s take a look at a comparison of WAAPI and CSS animations by creating a simple CSS animation and converting it to WAAPI.

The animation we’ll create is a rotation accompanied by a changing background color that will run indefinitely.