CSS3 transition-delay Property

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

Explanation

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.

Usage:


transition-delay: 1s;

Definition:

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).

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


Consider another example here:

Wait 2 seconds before the transition effect starts:

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



Result:



Ask Questions

Ask Question