The transition-delay property specifies a delay (in seconds) for the transition effect. Here is the syntax to show a 1 second delay before starting the transition effect:
transition-delay: 1s;
To see this in action, let your cursor hover over the red <div> element in the following example:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 100px; height: 100px; padding: 5px; background: red; -webkit-transition: width 3s; /* Safari */ -webkit-transition-delay: 1s; /* Safari */ transition: width 3s; transition-delay: 1s; } div:hover { width: 300px; } </style> <body> <div>Hold cursor here to see what happens!</div> </body> |
Hold cursor here to see what happens!
|
Note: This example does not work in Internet Explorer 9 and earlier versions.
