The transition-duration property specifies the time a transition takes.
The duration is specified in seconds (s) or in milliseconds (ms).
With a value of 0, no transition will occur.
An element with a 1-second transition-duration.
Hover over the rectangle and the background color change will take 1 second.
<style>
.transition-property {
width: 100px;
height: 100px;
background: orangered;
cursor: pointer;
transition-property: background-color;
transition-duration: 1s;
}
.transition-property:hover {
background-color: purple;
}
</style>
<div class="transition-property"></div>
transition-duration: time | initial | inherit;
| Value | Description |
|---|---|
time |
The number of seconds or milliseconds a transition effect will taks to complete. The default value is 0s which means the property change is instant, i.e. without transition. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when transition-duration support started for each browser.
 Chrome
|
26.0 | Mar 2013 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
12.1 | Nov 2012 |
 Safari
|
6.1 | Jun 2013 |
