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 the transition animation.
- initial: It sets the transition-delay property to its default value.
- inherit: This property is inherited from its parent element.
Example: In this example, we are using the transition-delay: time property.
HTML
<!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-delay: 2s</ p >
</ div >
</ body >
</ html >
|
Output:
Example: In this example, we are using the transition-delay: initial property.
HTML
<!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-delay: initial</ p >
</ div >
</ body >
</ html >
|
Output:
Example: In this example, we are using transition-delay: inherit property.
HTML
<!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 >
|
Output:
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 and above
- Edge 12.0 and above
- Firefox 16.0 and above
- Internet Explorer 10 and above
- Safari 9.0 and above
- Opera 12.1 and above
Last Updated :
09 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...