Keyframe animations in Angular - Mini Project: Build & Apply

Keyframe Animations in Angular

📖 Scenario: You are building a simple Angular component that shows a box. You want the box to smoothly change its background color from red to blue and back repeatedly using keyframe animations.

🎯 Goal: Create an Angular standalone component that uses Angular's animation system with keyframes to animate a box's background color from red to blue and back continuously.

📋 What You'll Learn

Create a standalone Angular component named ColorBoxComponent.

Define an animation trigger called colorChange using Angular's keyframes function.

Animate the background color from red to blue and back to red over 4 seconds infinitely.

Apply the animation trigger to a <div> element styled as a 200px by 200px square.

Use Angular's @angular/animations package and import necessary animation functions.

💡 Why This Matters

🌍 Real World

Keyframe animations are used in web apps to create smooth, visually appealing transitions and effects, improving user experience.

💼 Career

Understanding Angular animations is valuable for frontend developers building interactive and dynamic user interfaces.

1

Set up the Angular component with a box

Create a standalone Angular component named ColorBoxComponent with a template containing a <div> element that has a class box. In the component's styles, set the .box class to have a width and height of 200px and a background color of red.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-color-box',
  standalone: true,
  template: `
    
  `,
  styles: [
    ".box { width: 200px; height: 200px; background-color: red; }"
  ]
})
export class ColorBoxComponent {
  // Your code here
}

Need a hint?

Use @Component decorator with standalone: true. Add a <div> with class box in the template. Style the box with width, height, and background color red.

2

Import Angular animation functions and define animation trigger

Import trigger, transition, animate, and keyframes from @angular/animations. Create an animation trigger named colorChange that defines a transition from void to * with an animation lasting 4000ms using keyframes. For now, leave the keyframes array empty.

Angular

import { Component } from '@angular/core';
import { trigger, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-color-box',
  standalone: true,
  template: `
    
  `,
  styles: [
    ".box { width: 200px; height: 200px; background-color: red; }"
  ],
  animations: [
    trigger('colorChange', [
      transition('void => *', [
        animate('4000ms', keyframes([
          // Your keyframes here
        ]))
      ])
    ])
  ]
})
export class ColorBoxComponent {
  // Your code here
}

Need a hint?

Import animation functions from @angular/animations. Add an animations array in the component decorator. Define a trigger named colorChange with a transition from void to * that animates for 4000ms using keyframes.

3

Add keyframes to animate background color from red to blue and back

Inside the keyframes array of the colorChange trigger, add three keyframes: at offset 0 set background color to red, at offset 0.5 set background color to blue, and at offset 1 set background color back to red. Use the style object with { backgroundColor: 'color' } for each keyframe.

Angular

import { Component } from '@angular/core';
import { trigger, transition, animate, keyframes, style } from '@angular/animations';

@Component({
  selector: 'app-color-box',
  standalone: true,
  template: `
    
  `,
  styles: [
    ".box { width: 200px; height: 200px; background-color: red; }"
  ],
  animations: [
    trigger('colorChange', [
      transition('void => *', [
        animate('4000ms', keyframes([
          // Add keyframes here
        ]))
      ])
    ])
  ]
})
export class ColorBoxComponent {
  // Your code here
}

Need a hint?

Use style objects inside keyframes with backgroundColor and offset properties to define the color changes at 0, 0.5, and 1 offsets.

4

Apply the animation trigger to the box and make it repeat infinitely

Add the @colorChange animation trigger to the <div> with class box in the template using Angular's [@colorChange] binding. Modify the animation in the trigger to repeat infinitely by adding { iterations: Infinity } as the third argument to animate.

Angular

import { Component } from '@angular/core';
import { trigger, transition, animate, keyframes, style } from '@angular/animations';

@Component({
  selector: 'app-color-box',
  standalone: true,
  template: `
     
  `,
  styles: [
    ".box { width: 200px; height: 200px; background-color: red; }"
  ],
  animations: [
    trigger('colorChange', [
      transition('void => *', [
        animate('4000ms', keyframes([
          style({ backgroundColor: 'red', offset: 0 }),
          style({ backgroundColor: 'blue', offset: 0.5 }),
          style({ backgroundColor: 'red', offset: 1 })
        ]), { iterations: Infinity })
      ])
    ])
  ]
})
export class ColorBoxComponent {
  // Your code here
}

Need a hint?

Add the animation trigger binding [@colorChange] to the <div>. Pass { iterations: Infinity } as the third argument to animate to repeat the animation forever.