Property Description

The animation-name property specifies a name for the @keyframes animation.

This property has the following syntax:

animation-name: name|none|initial|inherit;

Property Values

Value	Description
name	Specifies the name of the keyframe you want to bind to the selector
none	Specifies that there will be no animation (can be used to override animations coming from the cascade)
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example shows the use of the animation-name property:

<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.1 12.0 -o- 15.0 -webkit-

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	none