CSS transition-duration Property

Description

The transition-duration CSS property specifies the amount of time it takes for a CSS property to change from its initial state to its final state when a transition effect is applied. It is part of the broader CSS transition property and plays a crucial role in creating smooth and visually appealing animations and transitions on web elements. By defining a specific duration in seconds or milliseconds, web developers can control the speed at which changes occur, allowing for gradual and controlled transitions in response to user interactions or other events, enhancing the overall user experience on websites and applications.

Initial value

0s

Applies to

All elements, :before and :after pseudo elements

Inherited

No

Computed value

Same as specified value

Animatable

No

JavaScript syntax

object.style.transitionDuration

Interactive Demo

transition-duration: 500ms;
transition-property: margin-right;

transition-duration: 2s;
transition-property: background-color;

transition-duration: 2s;
transition-property: margin-right, color;

transition-duration: 3s, 1s;
transition-property: margin-right, color;

transition-duration: 3s, 1s, 2s;
transition-property: margin-right, color, background-color;

Syntax

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

Values

• <time>The amount of time the transition from the old value of a property to the new value should take. A time of 0s indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid.

Example

<div class="test" > 5s </div> 

<div class="test2" > 2s </div> 

<div class="test3"> 400ms </div> 

div {
   width: 70px;
   height: 70px; 
   background-color: yellow;
   border: 5px dashed black;
   display: inline-block; 
   margin-right: 15px; 
}
div:hover {
   height: 200px; 
}
.test { 
   transition-duration: 5s;  
}
.test2 { 
   transition-duration: 2s; 
}
.test3 { 
   transition-duration: 400ms;  
} 

Browser Support

The following table will show you the current browser support for the CSS transition-duration property.

Desktop
12	26	16	12.1	9

Tablets / Mobile
26	16	12.1	9	1.5	4.4

Last updated by CSSPortal on: 2nd January 2024