@angular/animations

keyframes

function

Defines a set of animation styles, associating each style with an optional offset value.

keyframes(
  steps: AnimationStyleMetadata[]
): AnimationKeyframesSequenceMetadata;

Use with the animate() call. Instead of applying animations from the current state to the destination state, keyframes describe how each style entry is applied and at what point within the animation arc. Compare CSS Keyframe Animations.

Usage

In the following example, the offset values describe when each backgroundColor value is applied. The color is red at the start, and changes to blue when 20% of the total time has elapsed.

          
            // the provided offset valuesanimate("5s", keyframes([  style({ backgroundColor: "red", offset: 0 }),  style({ backgroundColor: "blue", offset: 0.2 }),  style({ backgroundColor: "orange", offset: 0.3 }),  style({ backgroundColor: "black", offset: 1 })]))

If there are no offset values specified in the style entries, the offsets are calculated automatically.

          
            animate("5s", keyframes([  style({ backgroundColor: "red" }) // offset = 0  style({ backgroundColor: "blue" }) // offset = 0.33  style({ backgroundColor: "orange" }) // offset = 0.66  style({ backgroundColor: "black" }) // offset = 1]))

keyframes

AnimationKeyframesSequenceMetadata

Defines a set of animation styles, associating each style with an optional offset value.

@paramstepsAnimationStyleMetadata[]

A set of animation styles with optional offset data. The optional offset value for a style specifies a percentage of the total animation time at which that style is applied.

@returnsAnimationKeyframesSequenceMetadata

Usage notes

Use with the animate() call. Instead of applying animations from the current state to the destination state, keyframes describe how each style entry is applied and at what point within the animation arc. Compare CSS Keyframe Animations.

Usage

In the following example, the offset values describe when each backgroundColor value is applied. The color is red at the start, and changes to blue when 20% of the total time has elapsed.

          
            // the provided offset valuesanimate("5s", keyframes([  style({ backgroundColor: "red", offset: 0 }),  style({ backgroundColor: "blue", offset: 0.2 }),  style({ backgroundColor: "orange", offset: 0.3 }),  style({ backgroundColor: "black", offset: 1 })]))

If there are no offset values specified in the style entries, the offsets are calculated automatically.

          
            animate("5s", keyframes([  style({ backgroundColor: "red" }) // offset = 0  style({ backgroundColor: "blue" }) // offset = 0.33  style({ backgroundColor: "orange" }) // offset = 0.66  style({ backgroundColor: "black" }) // offset = 1]))