CSS3 transition-property property
Examples
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"
In the bottom of this page for more examples.
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Attribute definitions and instructions
transition-property attribute specifies the CSS property nametransition effect (will start the specified CSS property changes when the transition effect).
Tip: a transition effect, usually occurs when the user hovers over an element.
Note: Always specify transition-duration property, otherwise duration of 0, transition will have no effect.
Defaults: | all |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object .style.transitionProperty = "width, height" |
grammar
value | description |
---|---|
none | No property get transitions. |
all | All properties will receive transition effects. |
property | Definitions apply the transition effect CSS property name list, which separated by commas. |
More examples
Transition effects - to change both properties
Hover over a div element, change the width and height with smooth transition effects.