Example: Card Fade and Scale Enter Animation

Scenario

In this lesson, we’ll create a grid of cards that will fade in and grow to its final size as it enters the DOM. This animation will be created using exclusively CSS keyframe animations without using any Angular-specific features. This is a great example of what we can achieve with pure CSS that is framework agnostic. In other words, you can use the same concept we learn in this section in other frameworks, such as Vue, React, Svelte, and so on.

We’ll create the animation in this lesson within a single component in the Angular application. We’ll use app.component.html, app.component.scss, and app.component.ts for the template, stylesheet, and any TypeScript-related logic respectively.

Step 1: Create the grid of cards

Let’s start with creating an array of strings with the name of the card that we can loop through in our template.