CSS | transition-delay Property
The transition-delay property in CSS is used to specify the time to start the transition. The value of transition-delay set in terms of seconds or milliseconds.
Syntax:
transition-delay: time|initial|inherit;
Property Values:
- time: It specifies the length of time (in seconds or milliseconds) to start transition animation.
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS transition-delay Property
</
title
>
<
style
>
div {
width: 100px;
height: 270px;
background: green;
transition-property: width;
transition-duration: 5s;
transition-delay: 2s;
/* For Safari browser */
-webkit-transition-property: width;
-webkit-transition-duration: 5s;
-webkit-transition-delay: 2s;
display: inline-block;
}
div:hover {
width: 300px;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>Transition-delay Property</
h2
>
<
div
>
<
p
>transition-dealy: 2s</
p
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- initial: It sets the transition-delay property to its default value.
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS transition-delay Property
</
title
>
<
style
>
div {
width: 100px;
height: 270px;
background: green;
transition-property: width;
transition-duration: 5s;
transition-delay: initial;
/* For Safari browser */
-webkit-transition-property: width;
-webkit-transition-duration: 5s;
-webkit-transition-delay: initial;
display: inline-block;
}
div:hover {
width: 300px;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>Transition-delay Property</
h2
>
<
div
>
<
p
>transition-dealy: initial</
p
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- inherit: This property is inherited from its parent element.
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS transition-delay Property
</
title
>
<
style
>
div {
width: 100px;
height: 270px;
background: green;
transition-property: width;
transition-duration: 5s;
transition-delay: inherit;
/* For Safari browser */
-webkit-transition-property: width;
-webkit-transition-duration: 5s;
-webkit-transition-delay: inherit;
display: inline-block;
}
div:hover {
width: 300px;
}
</
style
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>Transition-delay Property</
h2
>
<
div
>
<
p
>transition-delay: inherit</
p
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
Note: The default value for the transition-delay property is zero.
Supported Browsers: The browser supported by transition-delay property are listed below:
- Google Chrome 26.0, 4.0 -webkit-
- Edge 10.0
- Firefox 16.0, 4.0 -moz-
- Safari 6.1, 3.1 -webkit-
- Opera 12.1, 10.5 -o-