CSS property animation-name defines a list of animations that apply to an element. Each name is used to select the keyframe at-rule that provides the property values for the animation. Note that animation-duration must also be specified for animation to take effect.
CSS property animation-name
| CSS version: | CSS 3 |
| Value: | single-animation-name [ ‘,’ single-animation-name ]* |
| Initial: | none |
| Applies to: | all elements, ::before and ::after pseudo-elements |
| Inherited: | no |
Example – animation-name
In the following code, CSS property animation-name can be changed to the following values
- left-to-right
- rotate-element
<style>
@keyframes left-to-right {
0% {left:0;}
100% {left:200px;}
}
@keyframes rotate-element {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.box {
position: fixed;
background-color:lightgreen;
animation-name: left-to-right;
animation-duration: 4s;
animation-iteration-count:infinite;
}
</style>
<div class=box>Object</div>animation-name refresh
Example – multiple animation-name
Note the multiple values of animation-name and animation-duration here.
<style>
@keyframes left-to-right {
0% {left:0;}
100% {left:200px;}
}
@keyframes rotate-element {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.box {
position: fixed;
background-color:lightgreen;
animation-name: left-to-right, rotate-element;
animation-duration: 4s, 2s;
animation-timing-function: linear;
animation-iteration-count:infinite;
}
</style>
<div class=box>Object</div>
