The animation-name references a keyframes name.
@keyframes rules specify the animation conditions.
This is the animation that will play.
The animation-name property is assigned to a @keyframe name.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-name: transformAnimation;
}
@keyframes transformAnimation {
from { transform: none; }
to { transform: translateX(350%) rotate(180deg) scale(.2); }
}
</style>
<div class="animate"></div>
animation-name: keyframename | none | initial | inherit;
| Value | Description |
|---|---|
| keyframename | Keyframe name you want to bind to the selector |
| none | Default. No animation (can be used to override animations coming from the cascade) |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different animation-name values.
<style>
.animate-example {
width: 80px;
height: 80px;
background: steelblue;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-name: none;
}
@keyframes movingAnimation {
from { transform: none; }
to { transform: translateX(350%); }
}
</style>
<div class="animate-example"></div>
This table shows when animation-name support started for each browser.
 Chrome
|
43.0 | May 2015 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
30.0 | Jun 2015 |
 Safari
|
9.0 | Sep 2015 |
