transition
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper
prefixes to use 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 spec changes.
Summary
The CSS transition property is a shorthand property for transitionproperty, transition
duration, transitiontimingfunction, and transitiondelay. It enables you to define the
transition between two states of an element. Different states may be defined using pseudoclasses like
:hover or :active or dynamically set using JavaScript.
Initial value the concatenation of the initial values of its longhand properties:
transitiondelay: 0s
transitionduration: 0s
transitionproperty: all
transitiontimingfunction: ease
Applies to all elements, ::before and ::afterpseudoelements
Inherited no
Media interactive
Computed value as specified
Animatable no
Canonical order order of appearance in the formal grammar of the values
Syntax
1 /* Apply to 1 property */
2
https://developer.mozilla.org/en/docs/Web/CSS/transition 1/3
6/28/2015 transition CSS | MDN
3 /* property name | duration */
4 transition: margin‐left 4s;
5
6 /* property name | duration | delay */
7 transition: margin‐left 4s 1s;
8
9 /* property name | duration | timing function | delay */
10 transition: margin‐left 4s ease‐in‐out 1s;
11
12 /* Apply to 2 properties */
13 transition: margin‐left 4s, color 1s;
14
15 /* Apply to all changed properties */
transition: all 0.5s ease‐out;
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 transitionduration, and the second value that can be parsed as a time is assigned to
transitiondelay.
See When property value lists are of different lengths for details on 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>#
Examples
There are several more examples of CSS transitions included in the main CSS transitions article.
Specifications
Specification Status Comment
CSS Transitions
WD Working Draft
The definition of 'transition' in that specification.
Browser compatibility
https://developer.mozilla.org/en/docs/Web/CSS/transition 2/3
6/28/2015 transition CSS | MDN
Desktop Mobile
See also
Using CSS transitions
TransitionEvent
Transitionsrelated properties: transition, transitiondelay, transitionduration,
transitionproperty, transitiontimingfunction
https://developer.mozilla.org/en/docs/Web/CSS/transition 3/3