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 |