Transition-duration - Property CSS

Syntax diagram of transition-duration.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• duration is a duration: a numeric value followed by one of the CSS units of duration.
• The syntax can be repeated as many times as there are transitions, separated by commas.

Description of the transition-duration property.

transition-duration defines the duration of the transition. This value must be set to a value greater than 0 seconds for the transition effect to be visible.

Let us recall that the transition effect consists of gradually changing the value of a property, and not abruptly. Once the transition is defined, each change in the property value will occur over the time defined by transition-duration. For more information on transitions in general, refer to shorthand property transition.

Values for transition-duration.

• transition-duration: 5s;

  The transition will take place over a total duration of the indicated value. It is a positive number followed by one of CSS units of duration. The default value is 0, which cancels the effect of the transition.

• transition-duration: 5s, 3s;

  Several values can be stated, separated by commas. This syntax can be used when multiple transitions are defined: see the page multiple transitions.

• transition-duration: initial; (0s) transition-duration: inherit; transition-duration: revert; transition-duration: revertLayer; transition-duration: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the transition-duration property.

The animation of transition-duration is not possible. Moreover, it would not make sense since this property is one of the parameters of the animation (or the transition).

Manipulating the transition-duration property programmatically.

With Javascript, change the value of transition-duration.

Examples of Javascript code to modify the value of transition-duration. The first syntax, in kebab-case is classic in CSS, while the second syntax is more common in Javascript.

let el = document.getElementById('id'); el.style['transition-duration'] = '750ms'; // or let el = document.getElementById('id'); el.style.transitionDuration = '750ms';

With Javascript, read the value of transition-duration.

Two syntaxes equally for reading the value of transition-duration. The property must have been assigned directly to the element itself and not through a CSS selector. The duration is returned exactly as it was set, in the same unit.

let el = document.getElementById('id'); let value = el.style['transition-duration']; // or let el = document.getElementById('id'); let value = el.style.transitionDuration;

With Javascript, read the computed value of transition-duration.

Below is how to read the computed value of transition-duration in Javascript. The duration is always returned in seconds, even if it was set in milliseconds.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('transition-duration');

With JQuery, change the value of transition-duration.

JQuery also allows the modification and reading of the value of the property transition-duration, with shorter syntaxes than those of Javascript.


$('#id').css('transition-duration', '750ms');
// or
$('#id').css('transitionDuration', '750ms');


With JQuery, read the computed value of transition-duration.

let value = $('#id').css('transition-duration');

Other code examples.

Other examples of Javascript and JQuery code are given on the page Javascript and CSS.

Test yourself.

The buttons below apply the entered value to the transition-duration property and then display either the value as it was applied, or the computed value. This second option allows you to see how the value of transition-duration is serialized. In particular, it is noted that the unit is always the second, even if the value was defined in milliseconds.

Simulator.

A transition has been set on the margin-left property of the blue element below. Enter a value for transition-duration, in seconds (2s) or in milliseconds (200ms), and then click the "Start" button. This will change the left margin of the element.

Browsers compatibility with transition-duration.

Transition effects, and the property transition-duration are well supported by current browsers.

1

Transitions
support

2

transition-duration
property

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the transition-duration property.

• CSS Transitions - Level 1

  Normally, when a property changes of value, its display on the screen is immediate. This specification module describes how to progressively change properties from one value to another over a given time. In other words, how to gradually move from one state to another.
  However, an external event is needed to trigger the change in property values (JavaScript code, user action, etc.). In this sense, transitions differ from animations, which can run independently of any external action.

  Regarding transition-duration. First specification defining transitions in CSS.
  And introduction of the transition-duration property.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Transitions - Level 2

  Level 2 of the specification on transitions adds the ability to apply a transition to a discrete property.
  A new at-rule @starting-style allows defining the starting values for property values. It is now possible to apply a transition to elements that go from the invisible state to the visible state.

  Regarding transition-duration. No change to the transition-duration property.
  

  September 05, 2023

  Working Draft.

  

  

  

See also regarding the transitions.

The W3C publishes standards segmented into modules. Transitions are described in the CSS Transitions. To facilitate your research, here are the other properties related to transitions:

Properties:

At-rules: