transition-duration

Summary

The ‘transition-duration’ property specifies the length of time a transition animation takes to complete.

Overview table

Initial value: 0s
Applies to: all elements, :before and :after pseudo elements
Inherited: No
Media: interactive
Computed value: Same as specified value
Animatable: No
CSS Object Model Property: transitionDuration
Percentages: N/A

Syntax

transition-duration: time

Values

time: Floating-point number, followed by a time units designator (ms or s). For more information about the supported time units, see CSS Values and Units Reference.

Examples

/*
  * This example gradually changes the background color
  * of a div to red over the specified duration time(3s)
  */
div:hover{
    background-color: red;
    transition-duration:3s;
}

View live example

Notes

Transitions respect Cascading Style Sheets (CSS) box model constraints such as min-width. For example, if an element is declared with a min-width value of 50px then a transition to a width of 25px is not valid. In a case such as this, the transition runs for the specified duration from the start value until a valid maximum or minimum end value, as appropriate.

Standards information

CSS Transitions Module Level 3, Section 2.2

Related specifications

CSS Transitions: W3C Working Draft

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]