@angular/animations

animate

function

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

API

Usage Notes

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

animate

AnimationAnimateMetadata

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

@paramtimingsstring | number

Sets AnimateTimings for the parent animation. A string in the format "duration [delay] [easing]".

Duration and delay are expressed as a number and optional time unit, such as "1s" or "10ms" for one second and 10 milliseconds, respectively. The default unit is milliseconds.
The easing value controls how the animation accelerates and decelerates during its runtime. Value is one of ease, ease-in, ease-out, ease-in-out, or a cubic-bezier() function call. If not supplied, no easing is applied.

For example, the string "1s 100ms ease-out" specifies a duration of 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style, which decelerates near the end of the duration.

@paramstylesAnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null

Sets AnimationStyles for the parent animation. A function call to either style() or keyframes() that returns a collection of CSS style entries to be applied to the parent animation. When null, uses the styles from the destination state. This is useful when describing an animation step that will complete an animation; see "Animating to the final state" in transitions().

@returnsAnimationAnimateMetadata