animation property CSS Reference

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.

  • Initial the 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 to all elements, ::before and ::after pseudo-element
  • Inherited no
  • Media visual
  • Computed Value as 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
  • Animatable no
  • Canonical order order of appearance in the formal grammar of the values


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.


See CSS animations for examples.


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (Yes)-webkit5.0 (5.0)-moz
16.0 (16.0)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportNA5.0 (5.0)-moz
16.0 (16.0)
NANAiOS 2.0-webkit

Relative articles