The transition
CSS property is a shorthand property for transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Transitions enable 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.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing function | delay */ transition: margin-right 4s ease-in-out 1s; /* Apply to 2 properties */ transition: margin-right 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease-out; /* Global values */ transition: inherit; transition: initial; transition: unset;
The transition
property is specified as one or more single-property transitions, separated by commas.
Each single-property transition describes the transition that should be applied to a single property (or the special values all
and none
). It includes:
- zero or one value representing the property to which the transition should apply. This may be any one of:
- the keyword
none
- the keyword
all
- a
<custom-ident>
naming a CSS property.
- the keyword
- zero or one
<single-transition-timing-function>
value representing the timing function to use - zero, one, or two
<time>
values. The first value that can be parsed as a time is assigned to thetransition-duration
, and the second value that can be parsed as a time is assigned totransition-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 definition
Initial value | as each of the properties of the shorthand: |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Formal syntax
<single-transition>#where
<single-transition> = [ none | <single-transition-property> ] | <time> | <timing-function> | <time>
where
<single-transition-property> = all | <custom-ident>
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
Examples
There are several more examples of CSS transitions included in the Using CSS transitions article.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transition' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transition | Chrome
Full support
26
| Edge
Full support
12
| Firefox
Full support
16
| IE
Full support
10
| Opera
Full support
12.1
| Safari
Full support
9
| WebView Android
Full support
≤37
| Chrome Android
Full support
26
| Firefox Android
Full support
16
| Opera Android
Full support
12.1
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
1.5
|
Gradients | Chrome No support No | Edge No support 12 — 79 | Firefox No support No | IE Full support 10 | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.