How WAAPI works
Explore how to create dynamic and controllable animations in Angular using the Web Animations API (WAAPI). This lesson helps you understand the key differences between CSS animations and WAAPI, learn how to define keyframes and animation configurations in JavaScript, and how to trigger animations effectively in your Angular projects.
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 ...