-webkit-animation Redirect 1

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

Summary

The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction and animation-fill-mode.

A list of CSS properties that can be animated is available; it's worth noting that these are the same properties supported by CSS transitions.

  • Initial value 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-elements
  • 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

Syntax

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.

Examples

See CSS animations for examples.

Specifications

Specification Status Comment
CSS Animations Working Draft  

Browser compatibility

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
12.10 #
4.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 5.0 (5.0)-moz
16.0 (16.0)
? ? iOS 2.0-webkit

Cross-Browser Animations

Considering all prefixes above, here is a cylon eye animation incorporating linear gradients and animations that works across Firefox, Chrome, Opera, and IE10:

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 {
  color:white;
  height: 100%;
  width: 20%;

  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:     -ms-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%);

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

@-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%; }  }

See also

Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,
Hide Sidebar