CSS Reference Manual

CSS @rules

Complete List of CSS Properties

CSS3 transition-timing-function Attribute CSS3 transition-duration Attribute

CSS3 transition-Usage and examples of the property attribute

transition-The propertyCSS attribute specifies the name of the CSS property to which the transition effect should be applied.

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

Default Value:	all
Applicable to:	All elements ::before and ::after Pseudo-element
Inheritance:	None
Animated by:	No.Please see Animation Properties.
Version:	CSS3new feature
JavaScript Syntax:	object.style.transitionProperty="width,height"

transition-property usage syntax

The syntax of this attribute is as follows:

transition-property:　　[,　, ... ]　|　none　|　all　|　initial　|　inherit
　where　　is a CSS property name

The following example demonstrates how to use transition-property 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
none	No properties will obtain the transition effect.
all	All properties will obtain the transition effect. This is the default value.
initial	Set this attribute to its default value.
inherit	If specified, the associated element will use its parent element's transition.-The value of property attribute.

Browser Compatibility

transition-The compatibility of property attribute in browsers, the numbers in the following table represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox 4+ ^-moz-,16 + Google Chrome 4+ ^-webkit-,26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-,6.1+ Opera 10.5+ ^-o-,12.1+