{ "id": "api/animations/keyframes", "title": "keyframes", "contents": "\n\n
\n
\n
\n \n API > @angular/animations\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

keyframeslink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

\n\n \n
\n \n \n \n\n
\n \n\n keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n steps\n AnimationStyleMetadata[]\n

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

\n\n
\n\n \n
Returns
\n

AnimationKeyframesSequenceMetadata: An object that encapsulates the keyframes data.

\n \n \n\n\n \n\n \n
\n\n\n \n\n \n\n\n\n \n
\n

Usage noteslink

\n

Use with the animate() call. Instead of applying animations\nfrom the current state\nto the destination state, keyframes describe how each style entry is applied and at what point\nwithin the animation arc.\nCompare CSS Keyframe Animations.

\n

Usagelink

\n

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

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

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

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