CSS animation-name Property
Last Updated :
10 Apr, 2024
The animation-name property in CSS is a crucial part of defining animations. It is used to specify the name of the @keyframes that describe the animation.
Understanding the Animation-Name Property
The animation-name property in CSS is used to connect an element to a set of keyframes. The keyframes describe the animation’s sequence of changes.
Syntax:
animation-name: keyframename|none|initial|inherit;
Property Value: The animation-name property value are listed below:
- keyframename: This property is used to specify the name of the keyframe which need to bind with selector.
- none: It is the default value. It is used to specify that there will be no animation.
- initial: This property is used to set this property to its default value.
- inherit: This property is used to inherits this property from its parent element.
Example: In this example, we are using the above-explained property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | animation-name Property
</title>
<style>
body {
text-align: center;
width: 70%;
}
h1 {
color: green;
}
div {
width: 50px;
height: 50px;
background: green;
position: relative;
-webkit-animation: geeks 5s infinite;
-webkit-animation-delay: 2s;
animation: geeks 5s infinite;
animation-delay: 2s;
}
@-webkit-keyframes geeks {
from {
left: 0%;
}
to {
left: 80%;
}
}
@keyframes geeks {
from {
left: 0px;
}
to {
left: 80%;
}
}
#one {
animation-direction: alternate-reverse;
;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>animation-name property</h2>
<div class="gfg"></div>
</body>
</html>
Output:Â 
Supported Browser: The browser supported by animation-name property are listed below:
- Google Chrome 43.0 and above
- Edge 12.0 and above
- Firefox 16.0 and above
- Opera 30.0 and above
- Safari 9.0 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...