This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

transition

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.

Examples

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

/*
 * 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;
}

View live example

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

Related specifications

CSS Transitions
W3C Working Draft

See also

Related articles

Animation

Transitions

Attributions