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)
+ve value (seconds)Default
animation-delay accepts value in seconds. 0s means the animation starts its execution as soon as it starts.
+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.
+ve value (milliseconds)
It also accepts value in milliseconds. 2000ms means 2s i.e. it will start execution after 2s.
-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.
It applies to all elements
Was this article helpful?