X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS transition-duration Property

The transition-duration CSS property specifies 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.

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

<!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>

Another example with the transition-duration property:

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;
      -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