CSS transition-delay property
Description
CSS transition-delay property defines the time duration between transition start (when applied) and its execution i.e. a delay in the execution of transition.
We take the example of a box that rotates by 270 degree on mouse hover within duration of 4s but with different values of transition-delay.
Syntax
transition-delay : time (seconds or milliseconds)
Property values
+ve value (seconds)Default
-
transition-delay accepts value in seconds. 0s means the transition starts its execution as soon as it starts.
transition-delay: 0s;
+ve value (seconds)
-
transition-delay also accepts fractional values. 2.5s means the transition starts execution after 2.5 seconds when it is applied.
transition-delay: 2.5s;
+ve value (milliseconds)
-
value in milliseconds may also be used. 2000ms means 2s. Wait for 2000ms to see the execution of transition.
transition-delay: 2000ms;
-ve value (seconds)
-
It starts execution partway through its life cycle. If the transition-duration is 3s and transition-delay is -2s, it shows a part of cycle that remains after subtracting transition-delay from transition-duration (1s).
transition-delay: -2s;
Applicable to
It applies to all elements
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
