Lost password?

CSS3 Transitions Tutorial


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

Internet Explorer Mozilla Firefox Apple Safari Opera Google Chrome
– 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

Reply