CSS transition-duration Property

The CSS transition-duration property is used to specify the number of seconds or milliseconds a transition animation should take to complete. In other words, this property is used to determine the amount of time taken by an element to transition from the old value of a property to its new value. By default, the value is 0s, meaning that no animation will occur.

The initial value of CSS transition-duration property is 0s. You can apply it to all elements including ::before and ::after pseudo-elements. This property is not inheritable. The final computed value of the transition-duration property is the exact same value that you initially supplied. This property is not animatable.

You may specify multiple comma-separated durations as a value for this property. Each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer durations specified than in the master list, the user agent will start repeating the list of durations. If there are more durations, the list is simply truncated to the right size. The CSS declaration stays valid in both the cases.

Syntax

This is the formal syntax for using transition-duration property.

transition-duration: <time> [, <time>]*

Here are some examples of using this property.

/* <time> values */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* Global values */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

Acceptable Values

<time>

In this case, a <time> value is given which specifies the amount of time for the transition to occur from the old value to the new value. The default vale is ‘0s’ which means that the transition between two states will be instantaneous. In other words, there will be no animation. A negative value is not allowed and providing a negative value will make the declaration invalid.

Working Examples

See the Pen CSS transition-duration Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS3 Transitions property is fully supported in 94.29% browsers and partially supported in 0% browsers. Therefore, its overall browser support is 94.29%.

This property is fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 26+, Safari 7+, Opera 15+, iOS Safari 8+, Android 53+ and Chrome for Android 56+. Support listed is for transition properties as well as the transitionend event.

Transitionable properties with calc() derived values are not supported below and including IE11. IE11 does not support CSS transitions on the SVG fill property.

In Chrome (up to 43.0), for CSS transition-delay property, either explicitly specified or written within transition property, the unit cannot be omitted even if the value is 0.

IE10 & IE11 are reported to not support transitioning the column-count property.

Browser support data has been taken from caniuse.com.

Further Reading

  1. Read more about the CSS <transition-duration> property on MDN.
  2. You can also read the CSS <transition-duration> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top