Multi-step Keyframes Animation
Explore how to build multi-step keyframe animations in Angular by sequencing style changes with the keyframes function. Understand how to create smooth transitions with shrinking, moving, and expanding effects by manipulating offset values similar to CSS keyframes.
We'll cover the following...
Similar to how CSS keyframes animations work, keyframes allow us to build an animation in multiple steps. In other words, it lets us sequence our style changes for each element. Since this method can be passed into the animate function, it can be combined with the previous lesson’s animation sequencing group and sequence functions, giving us even more control over the sequencing of our animations.
How it works
Angular animations uses the keyframes function to create multi-step animations. Angular executes each entry in the keyframes array based on their offset property one at a time, thereby enabling developers to create complex animation sequences.
The keyframes function accepts one ...