@angular/animations

animate

function

deprecatedsince v20.2

Defines an animation step that combines styling information with timing information.

Deprecation warning

Use animate.enter or animate.leave instead. Intent to remove in v23

API

function animate(  timings: string | number,  styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null,): AnimationAnimateMetadata;

Usage Notes

Call within an animation sequence(), group(), or transition() call to specify an animation step that applies given style data to the parent animation for a given amount of time.

Syntax Examples

Timing examples

The following examples show various timings specifications.

animate(500) : Duration is 500 milliseconds.
animate("1s") : Duration is 1000 milliseconds.
animate("100ms 0.5s") : Duration is 100 milliseconds, delay is 500 milliseconds.
animate("5s ease-in") : Duration is 5000 milliseconds, easing in.
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)") : Duration is 5000 milliseconds, delay is 10 milliseconds, easing according to a bezier curve.

Style examples

The following example calls style() to set a single CSS style.

animate(500, style({ background: "red" }))

The following example calls keyframes() to set a CSS style to different values for successive keyframes.

animate(500, keyframes( [  style({ background: "blue" }),  style({ background: "red" }) ])