CSS animation-duration Property
Last Updated :
10 Apr, 2024
The CSS animation-duration property is a powerful tool that controls the time it takes for an animation to complete a single cycle. This property is a key component in creating dynamic, engaging web designs.
The animation-duration property specifies the duration of one cycle of an animation. This duration can be defined in seconds or milliseconds. A value of 0, which is the default, means no animation will occur.
Syntax:
animation-duration: time|initial|inherit;
Property Value:
- time: This value is used to specify the length of time for which an animation will complete one cycle. This can be specified in either in seconds or in milliseconds. The default value is 0, which means that no animation will occur.
- initial: This value is used to set the property to its default value.
- inherit: This value is used to inherit the property from its parent element.
Example: HTML program to illustrate the animation-duration property in CSS.Â
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | animation-duration Property
</title>
<style>
#gfg1 {
animation-name: text;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#geek1 {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
}
#geek2 {
font-size: 17px;
font-weight: bold;
text-align: center;
}
@keyframes text {
from {
margin-top: 400px;
}
to {
margin-top: 0px;
}
}
</style>
</head>
<body>
<!-- The below div is animated for a duration of 5s
and will be played an infinite number of times -->
<div id="gfg1">
<div id="geek1">
GeeksforGeeks
</div>
<div id="geek2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:Â
 Supported Browser: The browser supported by animation-duration 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...