CSS animation-duration Property

The animation-duration property defines how long an animation should take to complete one cycle.

The animation-duration property is used to specify how long the animation cycle should take.

The time is specified in seconds or milliseconds, and is initially set to ā€˜0sā€™, which means that the animation occurs instantaneously.

You can specify one duration or multiple comma-separated durations. When you provide a list of comma-separated durations, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.


animation-duration: time|initial|inherit;

Example -