CSS transition-duration Property

The CSS transition-duration property defines how long a transition animation takes to go from its start state to its end state. It is one of the CSS3 properties and a longhand component of the transition shorthand.

This chapter explains how to write valid durations, how a single duration differs from a comma-separated list, the gotchas (zero values, missing units, mismatched list lengths), and how the property relates to the rest of the transition family — transition-property, transition-timing-function, and transition-delay.

How a duration is written

A duration is a single <time> value, given either in seconds (s) or milliseconds (ms):

transition-duration: 0.5s;   /* half a second */
transition-duration: 500ms;  /* the same thing */

A few rules worth knowing up front:

The unit is required. A bare number such as transition-duration: 2 is invalid and the whole declaration is ignored. Always write 2s or 2000ms.
Negative values are invalid. Unlike transition-delay, a duration may not be negative; the browser treats a negative duration as 0s.
0s means no visible transition. This is the default value, so the property change happens instantly. You must set a non-zero duration for the animation to be seen.

Multiple durations

One or multiple comma-separated durations can be specified. Each duration is applied to the matching property listed in transition-property, which acts as the master list:

transition-property: width, background-color;
transition-duration: 2s, 0.5s; /* width animates over 2s, background over 0.5s */

If there are fewer durations than properties, the list of durations is repeated until it fills the list. If there are more durations than properties, the extra durations are ignored:

/* 3 properties, 1 duration → every property uses 1s */
transition-property: width, height, color;
transition-duration: 1s;

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 »

Hover the gray box: because transition-duration is 2s, the width grows smoothly over two seconds instead of jumping instantly.

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.

transition-duration is rarely used alone. In practice you combine it with the other transition longhands, usually through the transition shorthand:

transition-property — which CSS properties animate.
transition-timing-function — the acceleration curve (ease, linear, cubic-bezier).
transition-delay — how long to wait before the transition starts.

For multi-step movement that can't be expressed as a single A-to-B change, use CSS animations instead.

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.