CSS3 transition-delay Property

Here is the brief explanation on how to specify the delay time in transition effect in CSS3.


Property :

transition-delay: time|initial|inherit;

time - Specifies the number of seconds or milliseconds to wait before the transition effect gets started.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.


transition-delay: 1s;


The transition-delay property specifies a delay (in seconds) for the transition effect. The transition-delay property specifies the starting time of the transition effect. The transition-delay value is defined in seconds (s) or milliseconds (ms).

.demodiv:hover {
width: 300px;
width: 100px;
height: 100px;
background: indigo;
-webkit-transition: width 3s; /* Safari */
transition: width 3s;
transition-delay: 3s;
-webkit-transition-delay: 3s; /* Safari */
<div class='demodiv'>

Consider another example here:

Wait 2 seconds before the transition effect starts:

div {
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;


Ask Questions

Ask Question