transition

< css‎ | properties
Jump to: navigation, search

transition

This article is Almost Ready.


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
Percentages N/A

Syntax

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


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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
prefix
26.0
Yes
?
Unknown
10.0
Yes
11.6
prefix
12.10
Yes
3.0
prefix

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
2.1
prefix
4.0
prefix
16.0
Yes
?
Unknown
10.0
prefix
12.10
Yes
3.2
prefix


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-


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]