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.

style

Declares a key/value object containing CSS properties/styles that can then be used for an animation state, within an animation sequence, or as styling data for calls to animate() and keyframes().

      
      style(tokens: "*" | { [key: string]: string | number; } | ("*" | { [key: string]: string | number; })[]): AnimationStyleMetadata
    
Parameters
tokens "*" | { [key: string]: string | number; } | ("*" | { [key: string]: string | number; })[]

A set of CSS styles or HTML styles associated with an animation state. The value can be any of the following:

  • A key-value style pair associating a CSS property with a value.
  • An array of key-value style pairs.
  • An asterisk (*), to use auto-styling, where styles are derived from the element being animated and applied to the animation when it starts.

Auto-styling can be used to define a state that depends on layout or other environmental factors.

Returns

AnimationStyleMetadata: An object that encapsulates the style data.

Usage notes

The following examples create animation styles that collect a set of CSS property values:

      
      // string values for CSS properties
style({ background: "red", color: "blue" })

// numerical pixel values
style({ width: 100, height: 0 })
    

The following example uses auto-styling to allow an element to animate from a height of 0 up to its full height:

      
      style({ height: 0 }),
animate("1s", style({ height: "*" }))