CSS transition-duration

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

Specification and Browser compatibility

SpecificationStatusCategories
CSS3 TransitionsW3C Working DraftCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 26+ Yes 16+ Yes 10+ Yes 12+ Yes 6.1+ Yes 12.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 7.0-7.1+ Yes 10+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments