Keyframes and Staggering
Create complex, staggered animations.
Keyframes and Staggering is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
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.
Frequently asked questions
Is the “Keyframes and Staggering” lesson free?
Yes — the full text of “Keyframes and Staggering” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
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
- Animation Basics: trigger and state
- Transitions and Timing
- Enter and Leave Animations
- Keyframes and Staggering