Challenge: Chain Animations Between Multiple Elements

Problem statement

Using only WAAPI in an Angular application, create three elements that rotate in sequence—the first element rotates 360 degrees, followed by the second, and then the third element, each waiting for the previous element’s animation to complete.

Clicking the play button should trigger the animation of the three elements with the following animation configuration:

• Duration: 500 milliseconds
• Timing function: ease-in-out

The playground below contains an element with basic styling so you can focus on adding the animation. You’ll also be using a single component to create the animation: app.component.ts, app.component.html, and app.component.scss.