Animate - Angular - W3cubDocs

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" })
 ])