CSS Reference Manual

CSS @rules

Comprehensive List of CSS Properties

CSS3 transition-property attribute CSS3 transition-delay attribute

CSS3 transition-Usage and examples of the duration attribute

transition-The duration CSS attribute specifies the number of seconds or milliseconds required for the transition animation to complete.

The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.

Default value:	0s
Applicable to:	All elements ::before and ::after Pseudo-element
Inheritance:	None
Animatable:	No.Please see Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.transitionDuration="5s"

transition-The syntax of duration

The syntax of this attribute is as follows:

transition-duration:　time　|　initial　|　inherit

The following example demonstrates how to use transition-duration attribute.

Example

button　{
　　　　background:　#fd7c2a;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Test and see‹/›

Attribute value

The following table describes the value of this attribute.

Value	Description
time	Specify the time required to complete the transition. The default value is 0s. Negative values are invalid.
initial	Set this attribute to its default value.
inherit	If specified, the associated element uses its parent element's transition-The value of the duration attribute.

Browser compatibility

transition-Browser compatibility of the duration attribute, the numbers in the table below represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 5+ ^-moz-,15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-,15+ ^-webkit-