The animation shorthand CSS property sets an animated transition between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

/* @keyframes duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

A description of which properties are animatable is available; it's worth noting that this description is also valid for CSS transitions.

Initial valueas each of the properties of the shorthand:
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Syntax

The animation property is specified as one or more single animations, separated by commas.

Each individual animation is specified as:

The order of values within each animation definition is important: 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.

The order within each animation definition is also important for distinguishing animation-name values from other keywords. When parsed, keywords that are valid for properties other than animation-name, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for animation-name. Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an animation-name that could be a value of another property, and may be output in additional cases.

Values

<single-animation-iteration-count>
The number of times the animation is played. The value must be one of those available in animation-iteration-count.
<single-animation-direction>
The direction in which the animation is played. The value must be one of those available in animation-direction.
<single-animation-fill-mode>
Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in animation-fill-mode.
<single-animation-play-state>
Determines whether the animation is playing or not. The value must be one of those available in animation-play-state.

Formal syntax

<single-animation>#

where
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

Examples

Cylon Eye

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>
.polling_message {
  color: white;
  float: left;
  margin-right: 2%;            
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

See Using CSS animations for additional examples.

Accessibility concerns

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

Specifications

Specification Status Comment
CSS Animations
The definition of 'animation' in that specification.
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 5
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE Full support 10Opera Full support 30
Full support 30
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 12.1 — 15
No support 12 — 15
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari Full support Yes
Full support Yes
Full support 4
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support Yes
Full support Yes
Full support 2
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes The animation-fill-mode property is not supported in Android browsers below 2.3.
Chrome Android Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 5
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support 30
Full support 30
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 12.1 — 14
No support 12 — 14
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari iOS Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support 4.0
Full support 4.0
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Quantum CSS notes

  • Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows (bug 1383239). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).
  • Another Gecko bug means that <details> elements can't be made open by default using the open attribute if they have an animation active on them (bug 1382124). Quantum CSS fixes this.
  • A further bug means that animations using em units are not affected by changes to the font-size on the animated element's parent, whereas they should be (bug 1254424). Quantum CSS fixes this.

See also