The time a CSS transition effect takes to complete.
Syntax
transition-duration: time [,time]... ;
time - One or more transition times, separated by commas, followed by a time unit designator (ms or s).
If more than one transition time is given they will apply in turn to the (multiple) transition elements specified with transition-property.
Examples:
h1 { transition-duration: 1.5s; }
.emw3class { transition-duration: 250ms; }
#emw3id { transition-duration: 2s,5s,15s; }
Try it:
This sample has a MouseOver / :hover style that changes the height and width and adds a red background. {width: 500px; height: 300px; background: red;} Reload the page to restart. |
(CSS 3) Browser Support: All major browsers including IE 10. For older versions, use the equivalent -moz-transition-duration for Firefox and -webkit-transition-duration for Safari and Chrome.
“I find that when I'm ready for something to end, I transition quickly. But when something ends before its time, I find it hard to move on” ~ Emma Caulfield
Related:
transition-property - Apply a transition effect to one or more CSS properties.
transition-timing-function - Speed curve of the transition effect.
transition-delay - Delay before the CSS transition is displayed.
transition - Shorthand to set the four transition- properties.