The animation-name property specifies one or more names of animations defined by the @keyframes rule which should be applied to the selected element. When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.
The animation-name property is one of the CSS3 properties.
The animation shorthand property can be used to set all animation properties at once. Different animation properties can control the animation. They can specify the iteration time of the animation, whether the animation should be playing or paused and whether it alternates between the values. The start time of the animation can also be delayed.
Initial Value | none |
Applies to | All elements. It also applies to ::before and ::after pseudo-elements. |
Inherited | No. |
Animatable | No. |
Version | CSS3 |
DOM Syntax | object.style.animationName = "element"; |
Syntax
animation-name: keyframename | none | initial | inherit;
Example of the animation-name property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation: element 4s infinite;
}
@keyframes element {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>
Values
Value | Description |
---|---|
none | This is default value. Specifies that there will be no animation |
keyframename | Specifies the name of animation. |
initial | It makes the property use its default value. |
inherit | It inherits the property from its parents element. |
Browser support
43.0+ 4.0-42.0 -webkit- |
16.0+ 5.0-15.0 -moz- |
9.0+ 5.1-8.0 -webkit- |
12.0+ 15.0-29.0 -webkit- |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.