CSS transition-duration Property

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.

Example

#

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>

Syntax

transition-duration: time | initial | inherit;

Values

#

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.

Browser support

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

You may also like

Guides