This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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