transition

Jump to: navigation, search

transition


W3C Working Draft

Summary

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element.

Overview table

Initial value see individual properties
Applies to all elements, :before and :after pseudo elements
Inherited No
Media interactive
Computed value as specified
Animatable No
CSS Object Model Property transition

Syntax

  • transition: transition-timing-function
  • transition: transition-delay
  • transition: transition-property
  • transition: transition-duration


Values

transition-property
Value of the transition-property property.
transition-duration
Value of the transition-duration property.
transition-timing-function
Value of the transition-timing-function property.
transition-delay
Value of the transition-delay property.


Examples

View live exampleWhen you hover over the div, the height property will gradually change from 100 to 500.

CSS

/*
 * This example usage of the transition shorthand
 * 
 * In this example the height of a div will change 
 * to 300px over 2 seconds. 
 * 
 * The non-shorthand equivalent would be:
 * transition-property: height;
 * transition-duration: 2s; 
 */

div:hover {
  height: 300px;
  transition: height 2s;
}


A list of translatable properties exists here: http://www.w3.org/TR/2009/WD-css3-transitions-20091201/#animatable-properties-

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 26
1 -webkit
16
4 -moz
10
12
11.6 -o
3 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support
2 -webkit
7 -webkit
26
1 -webkit
16
4 -moz
10
12.10
10 -o
Unsupported
3.2 -webkit

See also

Related articles

Animation
















  • transition





Transitions





  • transition






Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]