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>

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>

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.

Browser support

26.0+
1.0 -webkit-
12.0+ 16.0+
4.0 -moz- 49.0 -webkit-
6.1+
3.0 -webkit-
12.1+
15.0 -webkit-

Practice Your Knowledge

Which statement is incorrect about transition-duration property?



Do you find this helpful?

Related articles