Web4College

CSS animation-delay property

src

Description

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.

Syntax

animation-delay : value (seconds ro milliseconds)

Property values

+ve value (seconds)Default

0

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

animation-delay: 0s;
Try it

+ve fractional value (seconds)

2.5

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;
Try it

+ve value (milliseconds)

2000

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

animation-delay: 2000ms;
Try it

-ve value (seconds)

-2

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;
Try it

Applicable to

It applies to all elements