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

Syntax

  • !important: declaration
  • -ms-flex-pack: center
  • -ms-flex-pack: end
  • -ms-flex-pack: justify
  • -ms-flex-pack: start
  • align-content: center
  • align-content: flex-end
  • align-content: flex-start
  • align-content: space-around
  • align-content: space-between
  • align-content: stretch
  • align-items: baseline
  • align-items: center
  • align-items: flex-end
  • align-items: flex-start
  • align-items: stretch
  • align-self: auto
  • align-self: baseline
  • align-self: center
  • align-self: flex-end
  • align-self: flext-start
  • align-self: stretch
  • alignment-adjust: <length>
  • alignment-adjust: <percentage>
  • alignment-adjust: after-edge
  • alignment-adjust: alphabetic
  • alignment-adjust: auto
  • alignment-adjust: baseline
  • alignment-adjust: before-edge
  • alignment-adjust: central
  • alignment-adjust: hanging
  • alignment-adjust: ideographic
  • alignment-adjust: mathematical
  • alignment-adjust: middle
  • alignment-adjust: text-after-edge
  • alignment-adjust: text-before-edge
  • all-space-treatment: collapse
  • all-space-treatment: preserve
  • animation-delay: <time>
  • animation-direction: alternate
  • animation-direction: alternate-reverse
  • animation-direction: normal
  • animation-direction: reverse
  • animation-duration: <time>
  • animation-fill-mode: backwards
  • animation-fill-mode: both
  • animation-fill-mode: forwards
  • animation-fill-mode: none
  • animation-iteration-count: <single-animation-iteration-count>
  • animation-iteration-count: infinite
  • ... further results


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

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-

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

The given value was not understood.

See also

Related articles

The given value was not understood.

Animation
















  • transition





The given value was not understood.

Transitions





  • transition






Attribution

The given value was not understood. 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


The given value was not understood.

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


The given value was not understood.