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
}

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
}

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
}

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
}

Hint

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

Practice

1. What is the main purpose of using keyframe animations in Angular?

easy

A. To manage component data binding

B. To create smooth, multi-step visual changes in components

C. To handle HTTP requests efficiently

D. To define routing paths in the app

Solution

1. Step 1: Understand what keyframe animations do

   Keyframe animations allow defining multiple steps of style changes over time, creating smooth transitions.

2. Step 2: Identify Angular's use of keyframes

   Angular uses keyframes inside the animate function to control detailed animation steps.

3. Final Answer:

   To create smooth, multi-step visual changes in components -> Option B

4. Quick Check:

   Keyframe animations = smooth multi-step visual changes [OK]

Hint: Keyframes control step-by-step visual changes [OK]

Common Mistakes:

• Confusing animations with data handling
• Thinking keyframes manage routing
• Mixing animations with HTTP requests

2. Which of the following is the correct syntax to import keyframe animation functions in Angular?

easy

A. import { keyframes, animate } from '@angular/animations';

B. import { keyframe, animation } from '@angular/core';

C. import { animateKeyframes } from '@angular/animations';

D. import { keyframes, animate } from '@angular/core';

Solution

1. Step 1: Identify the correct Angular package for animations

   Angular animations functions like keyframes and animate are imported from '@angular/animations'.

2. Step 2: Check the exact function names and import syntax

   The correct functions are keyframes and animate, imported with curly braces from '@angular/animations'.

3. Final Answer:

   import { keyframes, animate } from '@angular/animations'; -> Option A

4. Quick Check:

   Correct import = import { keyframes, animate } from '@angular/animations'; [OK]

Hint: Animations import from '@angular/animations' with exact names [OK]

Common Mistakes:

• Importing from '@angular/core' instead of '@angular/animations'
• Using wrong function names like 'keyframe' or 'animation'
• Missing curly braces in import statement

3. Given the Angular animation code below, what will be the final background color after the animation completes?

animate('2s', keyframes([
  style({ backgroundColor: 'red', offset: 0 }),
  style({ backgroundColor: 'blue', offset: 0.5 }),
  style({ backgroundColor: 'green', offset: 1 })
]))

medium

A. red

B. blue

C. transparent

D. green

Solution

1. Step 1: Understand keyframe offsets and colors

   The animation starts at red (offset 0), changes to blue at halfway (offset 0.5), and ends at green (offset 1).

2. Step 2: Determine final style after animation

   At offset 1 (end), the background color is green, so the final color after animation is green.

3. Final Answer:

   green -> Option D

4. Quick Check:

   Final offset color = green [OK]

Hint: Final offset (1) style is final animation state [OK]

Common Mistakes:

• Choosing the first or middle color instead of final
• Confusing offset values with time
• Assuming default color remains after animation

4. Identify the error in this Angular animation code snippet:

trigger('fadeIn', [
  transition(':enter', [
    animate('1s', keyframes([
      style({ opacity: 0, offset: 0 }),
      style({ opacity: 1 })
    ]))
  ])
])

medium

A. Incorrect trigger name syntax

B. animate duration should be a number, not a string

C. Missing offset value in second style inside keyframes

D. transition selector ':enter' is invalid

Solution

1. Step 1: Check keyframe style objects for offsets

   Each style in keyframes should have an offset between 0 and 1 to define timing precisely.

2. Step 2: Identify missing offset

   The second style lacks an offset property, which is required for keyframes to work correctly.

3. Final Answer:

   Missing offset value in second style inside keyframes -> Option C

4. Quick Check:

   All keyframe styles need offset [OK]

Hint: Every keyframe style needs an offset between 0 and 1 [OK]

Common Mistakes:

• Omitting offset in some keyframe styles
• Using wrong transition selectors
• Passing duration as number instead of string

5. You want to create an Angular animation that moves an element from left to right and changes its opacity from 0 to 1 in 3 seconds, with three key steps: start (left: 0px, opacity: 0), middle (left: 50px, opacity: 0.5), and end (left: 100px, opacity: 1). Which of the following keyframes arrays correctly implements this?

hard

A. [
style({ left: '0px', opacity: 0, offset: 0 }),
style({ left: '50px', opacity: 0.5, offset: 0.5 }),
style({ left: '100px', opacity: 1, offset: 1 })
]

B. [
style({ left: 0, opacity: 0 }),
style({ left: 50, opacity: 0.5 }),
style({ left: 100, opacity: 1 })
]

C. [
style({ left: '0px', opacity: 0 }),
style({ left: '50px', opacity: 0.5, offset: 0.5 }),
style({ left: '100px', opacity: 1, offset: 1 })
]

D. [
style({ left: '0px', opacity: 0, offset: 0 }),
style({ left: '50px', opacity: 0.5 }),
style({ left: '100px', opacity: 1, offset: 1 })
]

Solution

1. Step 1: Verify all keyframe styles have offsets

   Each style must have an offset between 0 and 1 to define animation timing precisely.

2. Step 2: Check property values and units

   Left positions must be strings with units like 'px'. [ style({ left: '0px', opacity: 0, offset: 0 }), style({ left: '50px', opacity: 0.5, offset: 0.5 }), style({ left: '100px', opacity: 1, offset: 1 }) ] correctly uses '0px', '50px', '100px' and includes all offsets.

3. Step 3: Identify the correct option

   [ style({ left: '0px', opacity: 0, offset: 0 }), style({ left: '50px', opacity: 0.5, offset: 0.5 }), style({ left: '100px', opacity: 1, offset: 1 }) ] has all offsets and correct units; others miss offsets or units, making them invalid.

4. Final Answer:

   Option A with all offsets and px units -> Option A

5. Quick Check:

   Offsets + units correct = [ style({ left: '0px', opacity: 0, offset: 0 }), style({ left: '50px', opacity: 0.5, offset: 0.5 }), style({ left: '100px', opacity: 1, offset: 1 }) ] [OK]

Hint: All keyframes need offsets and units for position values [OK]

Common Mistakes:

• Missing offset properties in some keyframes
• Using numbers without units for CSS properties
• Partial offsets causing animation errors