Multi-step Keyframes Animation

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 parameter—steps—and returns an AnimationKeyframesSequenceMetadata. The AnimationKeyframesSequenceMetadata is an object that encapsulates the keyframes sequence data that can be passed to the animate function. The code snippet below shows the expected parameter type (line 2) and return type (line 3) of the keyframes function.