The transition-property
CSS property is used to specify the names of CSS properties to which a transition effect should be applied.
/* Keyword values */ 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; /* Global values */ transition-property: inherit; transition-property: initial; transition-property: unset;
If you specify a shorthand property (for example, background
) all of its longhand sub-properties that can be animated will be.
Initial value | all |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
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 letters
a
toz
, numbers0
to9
, 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.
Formal syntax
How to read CSS syntax.none | <single-transition-property>#where
<single-transition-property> = all | <custom-ident>
Examples
There are several examples of CSS transitions included in the main CSS transitions article.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transition-property' in that specification. |
Working Draft | Initial definition |
Browser compatibility
[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
.