transition-property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
The transition-property
CSS property sets the CSS properties to which a transition effect should be applied.
Try it
If you specify a shorthand property (e.g., background
), all of its longhand sub-properties that can be animated will be.
Syntax
/* Keyword values */
transition-property: none;
transition-property: all;
/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;
/* Multiple values */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
all,
-moz-specific,
sliding;
/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;
Values
none
-
No properties will transition.
all
-
All properties that can transition will.
<custom-ident>
-
A string identifying the property to which a transition effect should be applied when its value changes.
Formal definition
Initial value | all |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as specified |
Animation type | Not animatable |
Formal syntax
transition-property =
none |
<single-transition-property>#
<single-transition-property> =
all |
<custom-ident>
Examples
Basic example
When the button is hovered or focused, it undergoes a one-second color transition; the transition-property
is background-color
.
HTML
<button class="target">Focus me!</button>
CSS
.target {
transition-property: background-color;
transition-duration: 1s;
background-color: #ccc;
}
.target:hover,
.target:focus {
background-color: #eee;
}
See our Using CSS transitions guide for more transition-property
examples.
Specifications
Specification |
---|
CSS Transitions # transition-property-property |
Browser compatibility
BCD tables only load in the browser