Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

sequence

Defines a list of animation steps to be run sequentially, one by one.

      
      sequence(steps: AnimationMetadata[], options: AnimationOptions = null): AnimationSequenceMetadata
    
Parameters
steps AnimationMetadata[]

An array of animation step objects.

  • Steps defined by style() calls apply the styling data immediately.
  • Steps defined by animate() calls apply the styling data over time as specified by the timing data.
      
      sequence([
  style({ opacity: 0 }),
  animate("1s", style({ opacity: 1 }))
])
    
options AnimationOptions

An options object containing a delay and developer-defined parameters that provide styling defaults and can be overridden on invocation.

Optional. Default is null.

Returns

AnimationSequenceMetadata: An object that encapsulates the sequence data.

Usage notes

When you pass an array of steps to a transition() call, the steps run sequentially by default. Compare this to the group() call, which runs animation steps in parallel.

When a sequence is used within a group() or a transition() call, execution continues to the next instruction only after each of the inner animation steps have completed.