Creating complex Angular animations using keyframes

Since you already know about Angular animations from the previous recipes, you might be thinking, “That’s easy enough.” Well, time to level up your animation skills in this recipe. You’ll create a complex Angular animation using keyframes in this recipe to get started with writing some advanced animations.

Getting ready

The app that we are going to work with resides in start/apps/chapter04/ng-animations-keyframes inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-animations-keyframes
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 4.3: ng-animations-keyframes app running on http://localhost:4200

Now that we have the app running locally, let’...