animation

The animation CSS property is a shorthand property 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.

Syntax

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

Each individual animation is specified as:

• zero or one occurrences of the following values:
  • <single-transition-timing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>
• an optional name for the animation, which may be none, a <custom-ident>, or a <string>.
• zero, one, or two <time> values.

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.

Note that order is also important within each animation definition for distinguishing animation-name values from other keywords. When parsing, keywords that are valid for properties other than animation-name whose values were not found earlier in the shorthand must be accepted for those properties rather than for animation-name. Furthermore, when serializing, 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>

May be either infinite or a <number>.

<single-animation-direction>

May be any one of normal, reverse, alternate, or alternate-reverse.

<single-animation-fill-mode>

May be any one of none, forwards, backwards, or both.

<single-animation-play-state>

May be either running or paused.

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.

Specifications

Browser compatibility

[1] Partial support: animation-fill-mode property is not supported in Android browser below 2.3.

[2] In addition to unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit- prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] See the release notes to Opera 12.50.

[4] The name of the frames() timing function is currently under discussion, so it is currently disabled in browser release versions until a final decision is reached. It is currently turned on in Nightly/Canary only.

See also

• Using CSS animations
• JavaScript AnimationEvent API