CSS3 Usage and examples of transition properties

The transition CSS property allows you to define the transition effect between two states of an element. This istransition-property,transition-duration,transition-timing-functionAndtransition-delayAbbreviated property

The following table provides usage instructions and version history for this property, as well as the syntax for using this property in JavaScript scripts.

The syntax of transition usage

The syntax of this attribute is as follows:

transition:　transition1　,[　transition2,…transitionN]　|　initial　|　inherit
　　　　　　　　　　　　where transition is:　[　transition-property　|　transition-duration　|　transition-timing-function　|　transition-delay　]

The following example demonstrates how to use the transition attribute.

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

Attribute Value

The following table describes the value of this attribute.

Browser Compatibility

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

For further reading

Please refer to the following tutorials:CSS3 Transitions.

Related Attributes:transition-delay,transition-duration,transition-property,transition-timing-function.