animation property

Definition and Usage

The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-direction.

• Initialthe concatenation of the initial values of its longhand properties:
  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
• Applies toall elements, ::before and ::after pseudo-element
• Inheritedno
• Mediavisual
• Computed Valueas each of the properties of the shorthand:
  • animation-name: as specified
  • animation-duration: as specified
  • animation-timing-function: as specified
  • animation-delay: as specified
  • animation-direction: as specified
  • animation-iteration-count: as specified
  • animation-fill-mode: as specified
  • animation-play-state: as specified
• Animatableno
• Canonical orderorder of appearance in the formal grammar of the values

Syntax

Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>

The order is important within each animation definition: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.

Examples

See CSS animations for examples.

Compatibility

Desktop browsers

Mobile browsers