CSS - transition
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.
Example
There are several more examples of CSS transitions included in the main CSS transitions article.
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
<a href="css/transition#single-transition"><single-transition></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><single-transition> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/transition#single-transition-property"><single-transition-property></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/time" title="Possible values: a number followed by's' or 'ms', like 3s, -2.5ms or 0s."><time></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/single-transition-timing-function" title="Possible values: cubic-bezier(), steps(), linear, ease, ease-in, ease-out, east-in-out, step-start-step-end"><single-transition-timing-function></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/time" title="Possible values: a number followed by's' or 'ms', like 3s, -2.5ms or 0s."><time></a></code></p><p>where <br><code><single-transition-property> = all <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> IDENT<br><single-transition-timing-function> = ease <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> linear <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ease-in <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ease-out <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ease-in-out <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> step-start <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> step-end <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> steps(<a href="css/integer" title=""><integer></a><a href="css/value_definition_syntax#brackets" title="Brackets">[</a>, <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> start <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> end <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a>) <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> cubic-bezier(<a href="css/number" title=""><number></a>, <a href="css/number" title=""><number></a>, <a href="css/number" title=""><number></a>, <a href="css/number" title=""><number></a>)</code></p>
Description
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 value | as each of the properties of the shorthand: |
|---|---|
| Applies to | all elements, ::before and ::after pseudo-elements |
| Inherited | no |
| Media | interactive |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | no |
| Canonical order | order of appearance in the formal grammar of the values |
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
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions The definition of 'transition' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/transition