ExampleHover over a div element, and change the width with a smooth transition effect:
Try it yourself » More examples at the bottom of this page. |
The transition-property property is not supported in any browsers.
Safari and Chrome support an alternative, the -webkit-transition-property property.
Opera support an alternative, the -o-transition-property property.
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 |
Version: | CSS3 |
JavaScript syntax: | object.style.transitionProperty="width,height" |
transition-property: none|all|property; |
Value | Description |
---|---|
none | No property will get a transition effect |
all | All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
![]() |
Try it Yourself - Examples |
Transition effect - change two properties
Hover over a div element, and change the width AND height with a smooth
transition effect.