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 updated frequently. Please come back later to keep up with the updates.

See also

Related


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