transition

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

transition

This page has been flagged with the following issues:

High-level issues:

• Needs Topics

• Missing Relevant Sections

• Data Not Semantic

Content:

• Incomplete

• Examples Best Practices

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
Animatable	No
CSS Object Model Property

Syntax

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

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

div {
  height: 100px;
  -webkit-transition: height 2s; /* Safari and Chrome */
  -moz-transition: height 2s; /* Firefox */
  -o-transition: height 2s; /* Opera */
  transition: height 2s;
}

div:hover {
  height: 500px;
}

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

• JavaScript animation

• requestAnimationFrame

• @keyframes

• css/cssom/CSSKeyframeRule

• css/cssom/CSSKeyframeRule/keyText

• css/cssom/CSSKeyframeRule/style

• css/cssom/CSSKeyframesRule

• css/cssom/CSSKeyframesRule/cssRules

• css/cssom/CSSKeyframesRule/deleteRule

• css/cssom/CSSKeyframesRule/findRule

• css/cssom/CSSKeyframesRule/insertRule

• css/cssom/CSSKeyframesRule/name

• cubic-bezier

• steps

• animation

• animation-delay

• animation-direction

• animation-duration

• animation-fill-mode

• animation-iteration-count

• animation-name

• animation-play-state

• animation-timing-function

• Animations

• transition

• transition-timing-function

• SVG animation

• Making things move with CSS3 animations

• Dynamic visual effects with CSS3 transitions

Transitions

• JavaScript animation

• cubic-bezier

• steps

• animation-timing-function

• transition

• transition-delay

• transition-duration

• transition-property

• transition-timing-function

• Dynamic visual effects with CSS3 transitions

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network : Article

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