Keyframes and Staggering
Create complex, staggered animations.
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 })
]))All lessons in this course
- Animation Basics: trigger and state
- Transitions and Timing
- Enter and Leave Animations
- Keyframes and Staggering