Properties

CSS3 provides the transition-property [1], transition-duration [2], transition-timing-function [3], and transition-delay [4] properties to create transition effects. These CSS3 properties can be used either individually or with a ruleset using the shorthand notation (adding the property values to the transition property [5]).

• The transition-property determines the CSS property to animate, e.g., background-color.
• The transition-duration specifies the duration of the transition in seconds, e.g., 2s.
• The transition-delay adds a delay before the transition. It is specified in seconds, e.g., 1s.
• The transition-timing-function defines the function to be used for the appearance/easing of the transition.

Table 1 The property values to be used for transition effects.

Property	Values
transition-property	none | all | [ <IDENT> ]
transition-duration	<time>
transition-delay	<time>
transition-timing-function	ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
transition	[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>

They can be applied to all elements, as well as the :before and :after pseudo elements. They are not inherited. With the exception of transition-property used for visual media, all the other properties are interactive media properties.

Browser support

–	4.0+	4.0+	10.5+	3.0+

Examples

Example 1

#example {
	opacity: 0.3;
	transition-property: opacity;
	transition-duration: 2s;
	transition-delay: 1s;	
}

#example:hover {
	opacity: 0.6;
}

The first ruleset is equal to the shorthand notation

#example {
	opacity: 0.3;
	transition: opacity 2s ease 1s;
}

which applies to

<p id="example">
	Example 1 provides a fading effect with CSS3 transitions
</p>

Note. Beyond the general transition-property, transition-duration, and transition-delay used above, there are properties with the -moz- prefix for Firefox (-moz-transition-property, -moz-transition-duration, -moz-transition-delay), the -o- prefix for Opera (-o-transition-property, -o-transition-duration, -o-transition-delay), and the -webkit- prefix for Google Chrome and Safari (-webkit-transition-property, -webkit-transition-duration, -webkit-transition-delay). As of 2011, none of these are standardized.

The result looks like this in rendering engines with proper CSS3 support:

Example 1 provides a fading effect with CSS3 transitions

More examples coming soon…

This document is being edited. Please come back later to see the finalized version.

---

References

1. [1] Jackson, D., Hyatt, D., Marrin, C., Baron, L. D. (eds.) (2009) The ‘transition-property’ Property. In: CSS Transitions Module Level 3. World Wide Web Consortium. http://www.w3.org/TR/css3-transitions/#transition-property. Accessed 26 June 2011
2. [2] Jackson, D., Hyatt, D., Marrin, C., Baron, L. D. (eds.) (2009) The ‘transition-duration’ Property. In: CSS Transitions Module Level 3. World Wide Web Consortium. http://www.w3.org/TR/css3-transitions/#transition-duration. Accessed 26 June 2011
3. [3] Jackson, D., Hyatt, D., Marrin, C., Baron, L. D. (eds.) (2009) The ‘transition-timing-function’ Property. In: CSS Transitions Module Level 3. World Wide Web Consortium. http://www.w3.org/TR/css3-transitions/#transition-timing-function. Accessed 26 June 2011
4. [4] Jackson, D., Hyatt, D., Marrin, C., Baron, L. D. (eds.) (2009) The ‘transition-delay’ Property. In: CSS Transitions Module Level 3. World Wide Web Consortium. http://www.w3.org/TR/css3-transitions/#transition-delay. Accessed 26 June 2011
5. [5] Jackson, D., Hyatt, D., Marrin, C., Baron, L. D. (eds.) (2009) The ‘transition’ Shorthand Property. In: CSS Transitions Module Level 3. World Wide Web Consortium. http://www.w3.org/TR/css3-transitions/#transition. Accessed 26 June 2011