CSS3 transition-property property
May 06, 2021 CSS Reference Manual
Table of contents
CSS3 transition-property property
Description of property definition and use
The transition-property property specifies the nametransition effect of the CSS property (changes to the specified CSS property will be initiated when the transition effect is effected).
Tip: A transition effect usually occurs when the user hovers over an element.
Note: Always specify the transition-duration property, otherwise the duration is 0 and transition will have no effect.
| Default: | all |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.transitionProperty="width,height" |
Grammar
| Value | Describe |
|---|---|
| none | No properties get a transition effect. |
| all | All properties will have a transition effect. |
| property | Defines a list of CSS property names that apply transition effects, separated by commas. |
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Attributes | |||||
|---|---|---|---|---|---|
| transition-property |
26.0
4.0 -webkit- |
10.0 |
16.0
4.0 -moz- |
6.1
3.1 -webkit- |
12.1
10.5 -o- |
Hover over a div element and gradually change the width of the table:
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
Try it out . . .
There are more examples at the bottom of this page.
More instances
Conversion Effect - Change two properties
Hover over a div element and change the width and height with a smooth transition effect.