CSS animation-delay property


CSS animation-delay property delays the animation execution i.e. the delay between the animation start and its execution.

See the examples with different values of animation-delay.


animation-delay : value (seconds ro milliseconds)

Property values

+ve value (seconds)Default

animation-delay accepts value in seconds. 0s means the animation starts its execution as soon as it starts.

animation-delay: 0s;

+ve fractional value (seconds)

animation-delay also accepts fractional values. 2.5s means the animation starts execution after 2.5 seconds when it is applied.

animation-delay: 2.5s;

+ve value (milliseconds)

It also accepts value in milliseconds. 2000ms means 2s i.e. it will start execution after 2s.

animation-delay: 2000ms;

-ve value (seconds)

It starts execution partway through its life cycle. If the animation-duration is 3s and animation-delay is -2s, it shows a part of the cycle in the remaining time i.e. you can see the part of the animation cycle for the last 1s second.

animation-delay: -2s;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?