The time a CSS transition effect takes to complete.

      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.

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


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.

Copyright © 2013-2022
Some rights reserved