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:
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:
- initial: It sets the transition-delay property to its default value.
Example:
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:
- inherit: This property is inherited from its parent element.
Example:
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
Please Login to comment...