In this section, we will learn what the animation-name property is and how to use it in CSS.
Click here to run the example animation-name property.
CSS animation-name Property Definition and Usage
The CSS animation-name property is used to set the name of an animation that we want to apply to an element.
Note: This animation is created using @keyframes at rule.
CSS animation-name Property Syntax
animation-name: keyframename|none|initial|inherit;CSS animation-name Property Value
-
keyframe-animation: this is the name of the animation we want to
apply to the target element.
Note: the two global values “initial” and “inherit” values can also be used for the value of this property.
The default value of this property is set to none which means the target element doesn’t need an animation.
Example: animation-name property in CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
button{
width:10em;
height:10em;
display: block;
margin-top:1em;
margin-bottom: 1em;
margin-left: auto;
margin-right:auto;
border-radius: 0.5em;
border: thin solid lightgray;
animation-name:rotate_animation;
animation-duration:2s;
}
@keyframes rotate_animation{
from{
transform: rotateZ(0deg);
}to{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<button>This is button</button>
</body>
</html>Example: CSS animation-name property
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
button{
width:10em;
height:10em;
display: block;
margin-top:1em;
margin-bottom: 1em;
margin-left: auto;
margin-right:auto;
border-radius: 0.5em;
border: thin solid lightgray;
animation-name: change_background_color_anim;
animation-duration:2s;
}
@keyframes change_background_color_anim{
from{
background-color: lightskyblue;
}to{
background-color:lightpink;
}
}
</style>
</head>
<body>
<button>This is button</button>
</body>
</html>