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. Each duration will be applied to the matching property defined by the CSS transition-property. The transition-property list acts as the master list; if there are fewer durations than properties, 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.

Info

Vendor prefixes (such as -webkit-, -moz-, -o-) are no longer required for modern browsers, as transition-duration is fully supported across all current versions.

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

CSS transition-duration values

transition-duration: time | initial | inherit;

Example of the transition-duration property:

CSS transition-duration code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #666;
        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:

CSS transition-duration another code example

<!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;
        transition-property: background-color, left;
        transition-timing-function: linear, linear;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-duration: .3s, .3s;
      }
      .el2 {
        transition-duration: .6s, .6s;
      }
      .el3 {
        transition-duration: 1s, 1s;
      }
      .el4 {
        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.

Practice

Which statement is incorrect about transition-duration property?

Its default value is 0s.
Only one duration can be specified.
It can be applied to ::before and ::after pseudo-elements.