Rule Description

The @keyframes rule is used to create animations. In general, an animation in CSS3 is defined as changing from one CSS style to another.

This rule has the following syntax:

@keyframes name { selector { styles; }}

Property Values

Value	Description
name	(required) Specifies the name of the animation
selector	(required) Specifies that percentage of the animation duration Possible Value: 0-100% from (same as 0%) to (same as 100%)
styles	(required) Specifies one or more CSS style properties

Examples

This example shows the use of @keyframes rule to animate the position of a box:

<style type="text/css">

div.animate {
  width: 50px;
  height: 50px;
  color: white;
  padding: 2px;
  background: blue;
  position: relative;
}

#test1 {
  animation-name: boxmove;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  /* Firefox */
  -moz-animation-name: boxmove;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  /* Safari and Google Chrome */
  -webkit-animation-name: boxmove;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}

@keyframes boxmove
{
  from {left: 0px;}
  to {left: 210px;}
}

@-moz-keyframes boxmove /* Firefox */
{
  from {left: 0px;}
  to {left: 210px;}
}

@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
  from {left: 0px;}
  to {left: 210px;}
}
</style>

<div id="test1" class="animate">linear</div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
4.0 -webkit-	16.0 5.0 -moz-	10.0	4.0 -webkit-	12.10 12.0 -o- 15.0 -webkit-