mozilla
Your Search Results

    animation

    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, animation-fill-mode and animation-play-state.

    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
      • animation-play-state: running
    • 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: is itself a shorthand, applies to the same elements as each of its longhand properties.
      • animation-duration: is itself a shorthand, applies to the same elements as each of its longhand properties.
      • animation-timing-function: is itself a shorthand, applies to the same elements as each of its longhand properties.
      • animation-delay: is itself a shorthand, applies to the same elements as each of its longhand properties.
      • animation-direction: is itself a shorthand, applies to the same elements as each of its longhand properties.
      • animation-iteration-count: is itself a shorthand, applies to the same elements as each of its longhand properties.
      • animation-fill-mode: is itself a shorthand, applies to the same elements as each of its longhand properties.
      • animation-play-state: is itself a shorthand, applies to the same elements as each of its longhand properties.
    • 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> || <single-animation-play-state>
    

    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
    The definition of 'animation' in that specification.
    Working Draft Initial definition

    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 2.1 -webkit [1]
    4.0 -webkit
    5.0 (5.0)-moz
    16.0 (16.0)
    ? ? iOS 2.0-webkit

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

    Cylon Eye

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

    <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:      -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