Table of contents
- 1. Summary
- 2. Syntax
- 3. Examples
- 4. Specifications
- 5. Browser compatibility
- 6. See also
Summary
The transition
CSS property is a shorthand property for transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
- Initial value
: transition is a shorthand property, so it does not technically have an initial value
but the properties for which it is shorthand have the following initial values:transition-property: all
transition-duration: 0s
transition-timing-function: ease
transition-delay: 0s
- Applies to: all elements,
:before
and:after
pseudo elements - Inherited : no
- Media:
interactive
- Computed value : as specified
Syntax
transition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]
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.
Examples
There are several more examples of CSS transitions included in the main CSS transitions article.
Specifications
- CSS Transitions Module Level 3 (Working Draft)
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 -webkit | 4.0 (2.0) -moz | 10.0 -ms | 11.6 -o | 3.0 -webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 -webkit | ? | ? | 10.0 -o | 3.2 -webkit |