Complex route animations in Angular using keyframes

In the previous recipe, you learned how to create basic route animations, and in this one, we're going to level up our animation game. In this recipe, you'll learn how to implement some complex route animations in Angular using keyframes.

Getting ready

The project that we are going to work with resides in chapter04/start_here/complex-route-animations inside the cloned repository. It is in the same state as the final code of the Basic route animations in Angular recipe, except we don't have any animations configured yet:

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 something like the following:

Figure 4.9 – complex-route-animations app running on http://localhost:4200

Now that we have the...