keyframes
function
deprecatedsince v20.2
Defines a set of animation styles, associating each style with an optional offset value.
Deprecation warning
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]))Jump to details