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 |
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;
}
