CSS animation-name Property
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>In the given example the name of animation is set to "element". You can choose any name you want.
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. |
0 Comments
CAN FEEDBACK
Emoji