The CSS transition-delay property defines when the transition will start. It delays the transition from when it is applied.
CSS property transition-delay
| CSS version: | CSS 3 |
| Value: | time [, time]* |
| Initial: | 0s |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
Example – transition-delay
In the following code, CSS property transition-delay can be changed to the following values
- 1s
- 2s
- 4s
<style type="text/css">
div {
width: 100px;
background-color: lightblue;
transition-property: width;
transition-duration: 2s;
transition-delay: 1s;
}
div:hover {
width: 200px;
}
</style>
<div>
Hover me to see transition of width
</div>transition-delay refresh
Related
- CSS transition - animation effect when properties change
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| CSS3 Transitions | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 26+ | Yes 16+ | Yes 10+ | Yes 12+ | Yes 6.1+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 7.0-7.1+ | Yes 10+ | Yes 12.1+ |
source: caniuse.com
