The CSS transition-property property specifies the name of the CSS property to which the transition is applied.
CSS property transition-property
| CSS version: | CSS 3 |
| Value: | none | single-transition-property [, single-transition-property ]* |
| Initial: | all |
| Applies to: | all elements, :before and :after pseudo elements |
| Inherited: | no |
Example – transition-property
In the following code, CSS property transition-property can be changed to the following values
- background-color
- border-color
<style type="text/css">
div {
width: 100px;
background-color: white;
border: 4px solid yellow;
transition-property: background-color;
transition-duration: 2s;
}
div:hover {
background-color: lightblue;
border-color: blue;
}
</style>
<div>
Hover me to see transition of css-property
</div>transition-property refresh
Related
- CSS transition - animation effect when properties change
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| CSS3 Transitions | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 26+ | Yes 16+ | Yes 10+ | Yes 12+ | Yes 6.1+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 7.0-7.1+ | Yes 10+ | Yes 12.1+ |
source: caniuse.com
