CSS animation-duration property


CSS animation-duration property defines the total duration of one animation cycle only. We take an example of animation with different values of animation-duration.

Negative values are not allowed.


animation-duration : +ve value (seconds or milliseconds)

Property values

+ve value (seconds)Default

This value determines the duration of a single animation cycle. 1s means the cycle completes its life cycle within 1s.

animation-duration: 1s;

+ve value (seconds)

This value determines the duration of an animation cycle. If the value is 0s, the animation occurs instantly for 0s.

animation-duration: 0s;

+ve fractional value (seconds)

The animation-duration also accepts fractional values. For example, the animation can continue for 2.5s.

animation-duration: 2.5s;

+ve value (milliseconds)

It also accepts value in milliseconds. For example, the animation continues for 2000ms i.e. 2s.

animation-duration: 2000ms;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?