CSS transition-duration Property

The transition-duration property defines how long the transition animation should take.

The transition-duration property is one of the CSS3 properties.

One or multiple comma-separated durations can be specified.

Several durations may be specified, and each of these durations will be applied to the matching property defined by the CSS transition-property. This property acts as a master list, and in the cases when there are fewer durations than in the master list, the list of durations is repeated. If there are more specified durations, the list is shortened.

The default value is 0s, which means that the transition will not have any effect.

For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera are used with this property.

Initial Value	0s
Applies to	All elements, ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.transitionDuration = "3s";

Syntax

transition-duration: time | initial | inherit;

Example of the transition-duration property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #666;
        -webkit-transition-duration: 2s;
        -moz-transition-duration: 2s;
        -o-transition-duration: 2s;
        transition-duration: 2s;
      }
      div:hover {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the transition-duration property with the "time" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .example {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        position: relative;
        -webkit-transition-property: background-color, left;
        -moz-transition-property: background-color, left;
        -o-transition-property: background-color, left;
        transition-property: background-color, left;
        -webkit-transition-timing-function: linear, linear;
        -moz-transition-timing-function: linear, linear;
        -o-transition-timing-function: linear, linear;
        transition-timing-function: linear, linear;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        -webkit-transition-duration: .3s, .3s;
        -moz-transition-duration: .3s, .3s;
        -o-transition-duration: .3s, .3s;
        transition-duration: .3s, .3s;
      }
      .el2 {
        -webkit-transition-duration: .6s, .6s;
        -moz-transition-duration: .6s, .6s;
        -o-transition-duration: .6s, .6s;
        transition-duration: .6s, .6s;
      }
      .el3 {
        -webkit-transition-duration: 1s, 1s;
        -moz-transition-duration: 1s, 1s;
        -o-transition-duration: 1s, 1s;
        transition-duration: 1s, 1s;
      }
      .el4 {
        -webkit-transition-duration: 2s, 2s;
        -moz-transition-duration: 2s, 2s;
        -o-transition-duration: 2s, 2s;
        transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div class="container">
      <p>
        <code>transition-duration: .3s, .3s;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-duration: .6s, .6s;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-duration: 1s, 1s;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-duration: 2s, 2s;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
time	Specifies how many seconds or milliseconds a transition effect should complete. The default value is 0s.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.