The CSS transition-duration property defines the length of time that a transition takes.
CSS property transition-duration
CSS version: | CSS 3 |
Value: | time [, time]* |
Initial: | 0s |
Applies to: | all elements, :before and :after pseudo elements |
Inherited: | no |
Example – transition-duration
In the following code, CSS property transition-duration 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: 1s; } div:hover { width: 200px; } </style> <div> Hover me to see transition of width </div>
transition-duration refresh
Related
- CSS transition - animation effect when properties change
- CSS transition-property
- CSS transition-timing-function
- CSS transition-delay
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