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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA 5.0 (5.0)-moz
16.0 (16.0)
NA NA iOS 2.0-webkit

Relative articles