The animation-name property is used to specify one or more names of animations defined by @keyframes rules, that are to be applied to the selected element.
A @keyframes rule specifies the property values that are to be animated over a sequence of animation keyframes.
You can specify either one animation name in animation-name or a list of comma-separated names. Each name belongs to a @keyframes identifier. If the animation name specified using animation-name does not exist, no animation is applied.
When you provide a list of comma-separated animation names, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-duration properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.
The animation-name property is usually set as part of the animation shorthand property.
The animation applied to an element can be controlled using the different animation properties, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.
Official Syntax
Values
- none
- No keyframes are specified at all, so there will be no animation. Any other animations properties specified for this animation have no effect.
- <user-ident>
-
The animation will use the keyframes with the name specified by the
<user-ident>, if they exist. If no such keyframes exist, there is no animation.
Examples
The following are all valid animation-name values:
animation-name: bounce;
animation-name: shake, jump;
animation-name: some-animation-name;
The following applies an animation to an element and controls it using other animation properties. The animation name matches the name of an animation defined using an @keyframes rule. The .box element will not be animated because, in this code, there is no animation that matches the animation name provided in the animation-name property. The .animated element will have two animations applied to it, each with a specified duration.
.element {
animation-name: bounce;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.box {
animation-name: jump;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
.animated {
animation-name: bounce, change-bg-color;
animation-duration: 3s, 2s;
/* ... */
}
@keyframes change-bg-color {
from {
background-color: red;
}
to {
background-color: blue;
}
}
@keyframes bounce {
from {
top: 100px;
animation-timing-function: ease-out;
}
25% {
top: 50px;
animation-timing-function: ease-in;
}
50% {
top: 150px;
animation-timing-function: ease-out;
}
75% {
top: 75px;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}
Live Demo
In the following demo, two animations are defined using two @keyframes rules. One of these animations is applied to the element. Play with the code and apply the second animation to it to see how it affects the element.
Browser Support
CSS Animation
Complex method of animating certain properties of an element
W3C Working Draft
Supported from the following versions:
Desktop
- 43
- 16
- 10
- 12
- 9
Mobile / Tablet
- 9.0
- 131
- No
- 131
- 132
