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
transition-property: margin-right; transition-property: margin-right, color; transition-property: all; transition-property: none; <section id="default-example"> <div id="example-element">Hover to see<br />the transition.</div> </section> #example-element { background-color: #e4f0f5; color: black; padding: 1rem; border-radius: 0.5rem; font: 1em monospace; width: 100%; transition: margin-right 2s; } #default-example:hover > #example-element { background-color: #990099; color: white; margin-right: 40%; } 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: #cccccc; } .target:hover, .target:focus { background-color: #eeeeee; } See our Using CSS transitions guide for more transition-property examples.
Specifications
| Specification |
|---|
| CSS Transitions # transition-property-property |
Browser compatibility
Loading…