This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

Related specifications

CSS Transitions
W3C Working Draft

See also

Related articles

Transitions

Attributions