Treehouse: Grow your CSS skills. Land your dream job.

transition-duration

Last updated on:

The transition-duration property, normally used as part of transition shorthand, is used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states.

.example {
    transition-duration: 3s;
}

The value can be one of the following:

  • A valid time value (defined in seconds or milliseconds)
  • A comma-separated list of time values, for transitioning multiple properties on a single element

The default value for transition-duration is 0s, meaning that no transition will take place and the property change will take place immediately, even if the other transition-related properties are defined. The time value can be expressed as a decimal-based number for more precise timing and negative values are not allowed.

The following CodePen shows a hover effect on a box that uses a transition-duration value of 1s to gradually change the background color:

Check out this Pen!

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition-duration: 700ms;
    -moz-transition-duration: 700ms;
    -o-transition-duration: 700ms;
    transition-duration: 700ms;
}

IE10 (the first stable version of IE to support transition-duration) does not require the -ms- prefix.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```