The CSS animation-name property is used to specify one or more names for the @keyframes animation. 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.
This is one of the CSS3 properties. Different animation properties can control the animation.
- The CSS animation-name property accepts the following values.
- none
- keyframename
- initial
- inherit
Characteristics of animation-name property:
| Initial value | none |
| Applies to | All elements. It also applies to ::before and ::after Pseudo-elements |
| Inherited | No |
| Animatable | No |
| Version | CSS3 |
| JavaScript syntax | object.style.animationName = "element"; |
Syntax:
animation-name: keyframename | none | initial | inherit;
Values:
| Value | Description |
|---|---|
| none | This is a default value and specifies that there will be no animation. |
| keyframename | It specifies the name of the animation. |
| initial | This value makes the property use its default val ue. |
| inherit | Inherits the property from its parent’s element. |
Example of the animation-name property:
In the following code, the name of the animation is set as “ colors “.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation: element 4s infinite;
}
@keyframes element {
0% {
background-color: #BA55D3;
}
50% {
background-color: #8A2BE2;
}
100% {
background-color: #9400D3;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "colors".</div>
</body>
</html>
Result:
After executing the above code, you will get the result as shown in the below image.
Browser-Support:
Related Articles:
- CSS animation Property
- CSS animation-direction property
- animation-duration property
- CSS animation-iteration-count property
- CSS all Property
Frequently Asked Questions:
Describe the usage of animation-name property.
CSS animation-name property is used to specify one or more names for the @keyframes animation.
What is the default value of animation-name property?
The default value of an animation-name property is “ none “. It specifies that there will be no animation.
Define the syntax of animation-name property?
animation-name: keyframename | none | initial | inherit;
Is it possible to give multiple values in an animation property?
Yes, 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 post CSS animation-name property appeared first on Share Point Anchor.
Top comments (0)