@keyframes

The @keyframes CSS at-rule is the basis for keyframe animations used to animate (gradually change from one style to another) many CSS properties. This rule allows to specify what should happen at specific moments during the animation by defining styles for keyframes (or waypoints) along the animation sequence.

Syntax

@keyframes animation-name {keyframes-selector {css-styles;}}

The @keyframes rule consists of a keyword “@keyframes” followed by identifier (chosen by developer), which defines the animation. To bind the animation to a certain element this identifier is referred to as a value for the animation-name property.

This is how it looks like:

/* define the animation */
@keyframes your-animation-name {
    /* style rules */
}

/* apply it to an element */
.element {
    animation-name: your-animation-name;

    /* OR using the animation shorthand property */
    animation: your-animation-name 1s ...
}

The @keyframes rule and its identifier are then followed by a rule sets (i.e. style rules with selectors and declaration blocks, as in normal CSS code) delimited by curly braces.

In curly braces we put keyframe selectors, which define keyframes (or waypoints) in the animation sequence when the styles should be changed. (During the animation sequence the set of CSS styles can be changed many times.) The keyframe declaration block includes CSS properties and their values.

The keyframe selector can start with a percentage (%) or with the keywords “from” (same as 0%) and “to” (same as 100%). 0% is a starting point of the animation; 100% is the end point.

Example

@keyframes bouncing {
    0% {
        background-color: lightgreen;
    }
    50% {
        background-color: lightblue;
    }
         100% {
        background-color: grey;
    }

In this example we animate background color property. First, we set an identifier for the animation - bouncing. Then we set keyframe selectors - 0%, 50% and 100% and define values for the property - lightgreen, lightblue and grey. It means that the background color at the starting point (0%) will be light green till it reaches another keyframe (50%), in the middle of animation sequence the background will turn to light blue (from 50%-100%), and at the end point (100%) it will be grey.

This is how it will look like:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
      padding: 50px;
      animation: bouncing 4s infinite;
      }
      @keyframes bouncing {
      0% { background-color: lightgreen }
      50% { background-color: lightblue; }
      100% { background-color: grey; }
      }
    </style>
  </head>
  <body>
    <div class="element">The background of this text is animated.</div>
  </body>
</html>

In this example we also define the duration of one animation cycle (4s) and add infinite value to make our animation play endlessly.

Browser Support

The @keyframes rule is fully supported by major browsers. However, for some of them you should use prefixes listed below:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0 
-webkit- Opera 15.0
-o- Opera 12.0

Related Resources

CSS Animation