Definition and Usage
The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.
Note: The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don’t currently animate, because someday they might, causing unexpected results.
If you specify a shorthand property (for example, background, all of its longhand sub-properties that can be animated will be.
- Initialall
- Applies toall elements, ::before and ::after pseudo-element
- Inheritedno
- Mediavisual
- Computed Valueas specified
- Animatableno
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: none | <single-transition-property># [ ‘,’ <single-transition-property># ]*
transition-property: none transition-property: all transition-property: test_05 transition-property: -specific transition-property: sliding-vertically transition-property: test1 transition-property: test1, animation4 transition-property: all, height, all transition-property: all, -moz-specific, sliding transition-property: inherit
Values
- none
- No properties will transition.
- all
- All properties that can have an animated transition will do so.
- IDENT
- A string identifying the property to which a transition effect should be applied when its value changes. This identifier is composed by case-insensitive letter a to z, numbers 0 to 9, an underscore (_) or a dash(-). The first non-dash character must be a letter (that is no number at the beginning of it, even preceded by a dash). Also two dashes are forbidden at the beginning of the identifier.
Examples
No examples
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) -webkit | 4.0 (2.0) -moz 16.0 (16.0) |
10 | 11.6-o 12.10 |
(Yes) -webkit |
Mobile browsers
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) -webkit | (Yes) -webkit | 4.0 (2.0) -moz 16.0 (16.0) |
NA | NA | (Yes) -webkit |