Challenge: Spinning Animation

Problem statement

Using only CSS animations in an Angular application, create a rotation animation.

Expected behavior

Clicking the element should trigger its rotation if it’snot already spinning. After the animation ends, clicking the element again should retrigger the rotation animation. The animation should have the following configurations:

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

The playground below contains an element with basic styling so we 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.

Coding exercise