Web4College

CSS animation-duration property

src

Description

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.

Syntax

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

Property values

+ve value (seconds)Default

1

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

animation-duration: 1s;
Try it

+ve value (seconds)

0

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

animation-duration: 0s;
Try it

+ve fractional value (seconds)

2.5

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

animation-duration: 2.5s;
Try it

+ve value (milliseconds)

2000

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

animation-duration: 2000ms;
Try it

Applicable to

It applies to all elements