CSS animation-duration Property

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 slow 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:

timeSpecifies the animation duration time in seconds(s) or milliseconds(ms). The default value is 0.
initialSets the animation-duration property to its default value(0).
inheritInherits the animation-duration property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.animationDuration = “5s”