CSS Property: transition-property
The property, or properties, on which transitions — the gradual change of appearance over time — should be applied.
Possible Values
Value | Description | Example |
---|---|---|
[Property name] | The property that should transition. | color |
[Property name], [Property name] | Multiple property names can be separated by commas. | color, background, opacity |
all | All properties should transition. Default. | |
none | No properties should transition. | |
inherit | ||
initial | ||
unset |
Example
a {
color: rgba(255,0,0,.5);
transition-property: color;
transition-duration: .3s;
}
/* A semi-transparent red link with a quick transition applied to the color property. */
a:hover {
color: rgba(255,0,0,1);
}
/* When hovered over, the color of the link will gradually turn solid red over 0.3 seconds. */