Challenge: Create Sequential and Parallel Animations

Problem statement

Using Angular animations in an Angular application, create an enter and exit animation for the target element with the following configurations:

Enter animation

A sequential animation that plays one after the other:

• Original stateIt has an opacity of 0 and is scaled down to 0.5 of its original size.

• First animation: It fades in from an opacity of 0 to 1 for 500ms.

• Second animation: It scales up to its original size for 300ms.

Exit animation

A parallel animation that plays together:

• It fades out to an opacity of 0 for 500ms.
• It rotates 360deg for 300ms as it fades 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.