Creating complex Angular animations using keyframes

Since you already know about Angular animations from the previous recipes, you might be thinking, "Well, 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 project for this recipe resides in chapter04/start_here/animations-using-keyframes:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

This should open the app in a new browser tab and you should see the app as follows:

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

Now that we have the app running locally, let's look at the steps of the recipe in the next section.

How to do it…

...