Keyframe animations in Angular - Step-by-Step Execution

Concept Flow - Keyframe animations

Define animation trigger

↓

Set keyframes with styles

↓

Attach animation to component

↓

Trigger animation state change

↓

Angular runs animation steps

↓

Styles update over time

↓

Animation completes

This flow shows how Angular animations start from defining keyframes, attaching them to components, then running style changes step-by-step until the animation ends.

Execution Sample

Angular

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

@Component({
  selector: 'app-slide',
  template: `<div [@slideIn]="animationState">Slide me in</div>`,
  animations: [
    trigger('slideIn', [
      animate('1s', keyframes([
        style({ transform: 'translateX(-100%)', offset: 0 }),
        style({ transform: 'translateX(0)', offset: 1 })
      ]))
    ])
  ]
})
export class SlideComponent {
  animationState = 'start';

  // Method to trigger animation
  startAnimation() {
    this.animationState = 'end';
  }
}

Defines a slideIn animation that moves an element from left off-screen to its place in 1 second using keyframes.

Execution Table

Step	Animation Time (ms)	Current Keyframe Offset	Applied Style	Component State
1	0	0	transform: translateX(-100%)	Element off-screen left
2	250	0.25	transform: translateX(-75%)	Element moving right
3	500	0.5	transform: translateX(-50%)	Element moving right
4	750	0.75	transform: translateX(-25%)	Element moving right
5	1000	1	transform: translateX(0)	Element in final position
6	1001	-	Animation complete	Element stable at final position

💡 Animation ends after 1 second when offset reaches 1 and element is at final position.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
transform	translateX(-100%)	translateX(-100%)	translateX(-75%)	translateX(-50%)	translateX(-25%)	translateX(0)	translateX(0)
animationState	not started	running	running	running	running	completed	completed

Key Moments - 3 Insights

Why does the element style change gradually instead of jumping directly to the final position?

Because Angular applies styles at multiple keyframe offsets (see execution_table rows 2-5), creating smooth transitions instead of an instant jump.

What does the 'offset' value in keyframes represent?

Offset is the progress percentage of the animation from 0 (start) to 1 (end), controlling when each style is applied during the animation timeline (see execution_table column 'Current Keyframe Offset').

When does Angular consider the animation finished?

After the last keyframe offset (1) is reached and the final style is applied, Angular marks the animation as complete (see execution_table step 6).

Visual Quiz - 3 Questions

Look at the execution_table, what is the transform style at 500ms (Step 3)?

A translateX(-75%)

B translateX(0)

C translateX(-50%)

D translateX(-25%)

💡 Hint

Check the 'Applied Style' column at Step 3 in the execution_table.

At which step does the animation state change to 'completed'?

A Step 5

B Step 6

C Step 4

D Step 3

💡 Hint

Look at the 'Component State' column in the execution_table for when the animation finishes.

If the animation duration changed to 2 seconds, how would the 'Animation Time (ms)' values change in the execution_table?

A They would double, e.g., 0, 500, 1000, 1500, 2000

B They would stay the same

C They would halve, e.g., 0, 125, 250, 375, 500

D They would be random

💡 Hint

Animation time values correspond to duration multiplied by keyframe offsets.

Concept Snapshot

Angular Keyframe Animations:
- Use trigger() to name animation
- Use keyframes() to define style steps with offsets 0 to 1
- Attach animation to component metadata
- Trigger animation by changing state
- Angular applies styles smoothly over time
- Animation ends when offset reaches 1

Full Transcript

This visual execution shows how Angular keyframe animations work step-by-step. First, you define an animation trigger with keyframes specifying styles at different offsets from 0 to 1. The animation is attached to a component and triggered by a state change. Angular then runs the animation over the specified duration, updating the element's styles gradually at each keyframe offset. The execution table tracks the transform style changes and component state at each step, showing smooth movement from off-screen left to the final position. Key moments clarify why styles change gradually, what offsets mean, and when the animation finishes. The quiz tests understanding of style values at specific times, animation completion, and duration effects. The snapshot summarizes the key points for quick reference.

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