CSS - animation

Examples

<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: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
     -moz-animation: 4s linear 0s infinite alternate move_eye;
       -o-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%; }  }
   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }

Syntax  

/* @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;

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.

Formal syntax

<a href="css/animation#single-animation"><single-animation></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><p>where <br><code><single-animation> = <a title="Possible values: a number followed by's' or 'ms', like 3s, -2.5ms or 0s." href="css/time"><time></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-timing-function"><single-timing-function></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a title="Possible values: a number followed by's' or 'ms', like 3s, -2.5ms or 0s." href="css/time"><time></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-iteration-count"><single-animation-iteration-count></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-direction"><single-animation-direction></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-fill-mode"><single-animation-fill-mode></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-play-state"><single-animation-play-state></a> <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> <a href="css/animation#single-animation-name"><single-animation-name></a></code></p><p>where <br><code><single-timing-function> = <a title="Possible values: cubic-bezier(), steps(), linear, ease, ease-in, ease-out, east-in-out, step-start-step-end" href="css/single-transition-timing-function"><single-transition-timing-function></a><br><single-animation-iteration-count> = infinite <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/number"><number></a><br><single-animation-direction> = normal <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> reverse <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> alternate <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> alternate-reverse<br><single-animation-fill-mode> = none <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> forwards <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> backwards <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> both<br><single-animation-play-state> = running <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> paused<br><single-animation-name> = none <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> IDENT</code></p><p>where <br><code><single-transition-timing-function> = ease <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> linear <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ease-in <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ease-out <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ease-in-out <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> step-start <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> step-end <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> steps(<a title="" href="css/integer"><integer></a><a title="Brackets" href="css/value_definition_syntax#brackets">[</a>, <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> start <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> end <a title="Brackets" href="css/value_definition_syntax#brackets">]</a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a>) <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> cubic-bezier(<a title="" href="css/number"><number></a>, <a title="" href="css/number"><number></a>, <a title="" href="css/number"><number></a>, <a title="" href="css/number"><number></a>)</code></p>

Description  

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.

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

Browser Compatibility  

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

[2] In addition to the 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.

See Also  

• Using CSS animations
• AnimationEvent

Specifications  

License