Angular Academy · Lesson

Keyframes and Staggering

Create complex, staggered animations.

Lesson 4 of 413 steps

Keyframes and Staggering is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

Multi-Step Animations

Simple transitions go from A to B. For multi-step motion (bounce, pulse, color sweep) Angular offers keyframes, and for animating many items in sequence it offers stagger.

The keyframes Function

keyframes takes an array of style steps, each with an offset from 0 to 1 marking its position along the duration.

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

Understanding offset

offset is the fraction of the total duration. 0 is the start, 1 is the end. Offsets should increase across the array.

A Bounce Effect

Keyframes let you overshoot and settle for a bounce.

keyframes([
  style({ transform: 'translateY(0)', offset: 0 }),
  style({ transform: 'translateY(-20px)', offset: 0.5 }),
  style({ transform: 'translateY(0)', offset: 1 })
])

Omitting Offsets

If you omit offset, Angular distributes the keyframes evenly across the duration.

keyframes([
  style({ opacity: 0 }),
  style({ opacity: 1 })
])

The query Function

To animate children of a host, use query to select them inside a transition.

transition('* => *', [
  query(':enter', [
    style({ opacity: 0 })
  ])
])

The stagger Function

stagger applies a time offset between each queried element's animation, creating a cascading effect.

query(':enter', [
  style({ opacity: 0 }),
  stagger(100, [
    animate('300ms', style({ opacity: 1 }))
  ])
])

Staggering a List

Combine query + stagger in a trigger on the list container so items fade in one after another.

trigger('listAnim', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(80, animate('250ms', style({ opacity: 1 })))
    ], { optional: true })
  ])
])

The optional Flag

Pass { optional: true } to query so the animation does not error when no matching elements exist.

Negative Stagger

A negative value in stagger reverses the order, animating the last items first, useful for exit cascades.

stagger(-50, animate('200ms', style({ opacity: 0 })))

Performance Note

Staggering many elements can be heavy. Keep per-item durations short and prefer transform/opacity to keep animations on the GPU.

Quick Check

Test your understanding of keyframes and staggering.

Answer it in the interactive lesson

Recap

You learned that keyframes defines multi-step motion using offset values, while query + stagger animate many elements in a cascade. Use { optional: true } for safety and prefer GPU-friendly properties.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Keyframes and Staggering” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Keyframes and Staggering”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “Keyframes and Staggering”?

Create complex, staggered animations. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

How long does the “Keyframes and Staggering” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy