Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

This article needs a technical review. How you can help.

Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Summary

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Initial valueas each of the properties of the shorthand:
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediainteractive
Computed valueas each of the properties of the shorthand:
Animatableno
Canonical orderorder of appearance in the formal grammar of the values

Syntax

/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;

/* property name | duration | delay */
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-left 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

Note that order is important within the items in this property: the first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay.

See how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Formal syntax

<single-transition>#

where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

where
<single-transition-property> = all | IDENT
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

Examples

There are several more examples of CSS transitions included in the main CSS transitions article.

Specifications

Specification Status Comment
CSS Transitions
The definition of 'transition' in that specification.
Working Draft Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit
26.0 #
4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 10.1 -o
12.10 #
3.0 -webkit
6.1
Gradients[2] No support No support 10.0 No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 10.0 -o
12.10 #
3.2 -webkit
Gradients[1] No support No support 10.0 No support No support

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] PPK test

See also

Document Tags and Contributors

 Last updated by: Sebastianz,