CSS animation-name Property
The animation-name property is used to specify the name of the @keyframes describing the animation.
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
Last Updated :
03 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...