CSS animation-delay property

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;