CSS animation-duration property specifies the time that the animation takes to complete its one cycle.
The duration time is specified in seconds(s) or milliseconds(ms). By default, the duration time is set to 0s, which means that the animation happens instantly and we can not observe it.
The higher the value of the animation duration, the slower the animation. See implementation in the below example:
Example:
.div1{
animation-name: moveRight;
animation-duration: 5s;
}
.div2{
animation-name: moveRight;
animation-duration: 8s;
}
CSS Syntax
The animation-duration property has the following syntax:
animation-duration: time|initial|inherit;
Property Values
The animation-duration property accepts the following values:
| time | Specifies the animation duration time in seconds(s) or milliseconds(ms). The default value is 0. |
| initial | Sets the animation-duration property to its default value(0). |
| inherit | Inherits the animation-duration property from the parent element. |
General Info
| Default Value | 0 |
| Inherited | No |
| JavaScript Usage | element.style.animationDuration = “5s” |
