Keyframe animations in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Angular animation triggers?

Consider this Angular animation trigger attached to a component:

trigger('fadeInOut', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('500ms ease-in', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('500ms ease-out', style({ opacity: 0 }))
  ])
])

What will the component do when it appears and disappears?

A The component stays fully visible without any fade effect on enter or leave.

B The component instantly appears fully visible and then fades out over 500ms when removed.

C The component fades in over 500ms but disappears instantly without animation when removed.

D The component fades in from transparent to fully visible over 500ms when added, and fades out to transparent over 500ms when removed.

💡 Hint

Look at the :enter and :leave transitions and their styles.

The :enter transition starts with opacity 0 and animates to opacity 1 over 500ms, creating a fade-in effect. The :leave transition animates opacity from current to 0 over 500ms, creating a fade-out effect.

📝 Syntax

intermediate

Which option correctly defines a keyframe animation in Angular?

Angular animations use the keyframes() function to define multiple steps. Which of these options is syntactically correct?

A

animate('1s', keyframes({
  0: style({ opacity: 0 }),
  1: style({ opacity: 1 })
}))

B

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

C

animate('1s', keyframes([
  { opacity: 0, offset: 0 },
  { opacity: 1, offset: 1 }
]))

D

animate('1s', keyframes(
  style({ opacity: 0 }),
  style({ opacity: 1 })
))

💡 Hint

Remember that keyframes() takes an array of style() calls with offset values.

Option B correctly uses an array of style() objects with offset properties inside keyframes(). Other options misuse object syntax or omit offset.

🔧 Debug

advanced

Why does this Angular animation not run on component enter?

Given this animation trigger:

trigger('slideIn', [
  transition('void => *', [
    animate('300ms ease-in', keyframes([
      style({ transform: 'translateX(-100%)', offset: 0 }),
      style({ transform: 'translateX(0)', offset: 1 })
    ]))
  ])
])

The animation does not run when the component appears. What is the likely cause?

A The component is not using the animation trigger name 'slideIn' in its template, so the animation never starts.

B The transition state 'void => *' is correct, so the problem is elsewhere.

C The keyframes are missing the 'opacity' style, so the animation is ignored.

D The animate duration '300ms' is too short to see any effect.

💡 Hint

Check if the animation trigger is properly attached to the component's template.

If the animation trigger name is not used in the component's template (e.g., @slideIn on an element), Angular will not run the animation even if the trigger is defined.

❓ state_output

advanced

What is the final style of the element after this animation completes?

Consider this Angular animation:

trigger('colorChange', [
  transition('* => *', [
    animate('1s', keyframes([
      style({ backgroundColor: 'red', offset: 0 }),
      style({ backgroundColor: 'blue', offset: 0.5 }),
      style({ backgroundColor: 'green', offset: 1 })
    ]))
  ])
])

After the animation finishes, what background color will the element have?

A Red

B Blue

C Green

D No background color (transparent)

💡 Hint

The last keyframe defines the final style after animation.

The animation ends at offset 1 with backgroundColor 'green', so the element's background color will be green after the animation.

🧠 Conceptual

expert

Why use keyframe animations instead of simple style transitions in Angular?

Angular animations allow both simple style transitions and keyframe animations. Which reason best explains why you would choose keyframes?

A Keyframes allow defining multiple intermediate steps with different styles and timings, enabling complex animations.

B Keyframes run faster than simple style transitions because they use less CPU.

C Keyframes automatically handle browser compatibility issues without extra code.

D Keyframes are easier to write and require less code than simple style transitions.

💡 Hint

Think about the flexibility keyframes provide compared to a start and end style.

Keyframes let you specify multiple style changes at different points in time, allowing more detailed and complex animations than simple start-to-end transitions.

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