Example
Hover over a <div> element, and change the width with a smooth transition effect:
div {
transition-property: width;
}
div:hover {
width: 300px;
}
More "Try it Yourself" examples below.
Definition and Usage
The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).
Tip: A transition effect could typically occur when a user hover over an element.
Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.
| Default value: | all |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.transitionProperty="width,height"Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
CSS Syntax
transition-property: none|all|property|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | No property will get a transition effect |
| all | Default value. All properties will get a transition effect |
| property | Defines a comma separated list of CSS property names the transition effect is for |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Hover over a <div> element, and change the width AND height with a smooth transition effect:
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
Related Pages
CSS tutorial: CSS Transitions
HTML DOM reference: transitionProperty property
