實例
把鼠標指針放到 div 元素上,會產(chǎn)生帶有平滑改變元素寬度的過渡效果:
div { transition-property:width; -moz-transition-property: width; /* Firefox 4 */ -webkit-transition-property:width; /* Safari 和 Chrome */ -o-transition-property:width; /* Opera */ }
瀏覽器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 屬性。
Safari 支持替代的 -webkit-transition-property 屬性。
注釋:Internet Explorer 9 以及更早版本的瀏覽器不支持 transition-property 屬性。
定義和用法
transition-property 屬性規(guī)定應用過渡效果的 CSS 屬性的名稱。(當指定的 CSS 屬性改變時,過渡效果將開始)。
提示:過渡效果通常在用戶將鼠標指針浮動到元素上時發(fā)生。
注釋:請始終設置 transition-duration 屬性,否則時長為 0,就不會產(chǎn)生過渡效果。
默認值: | all |
---|---|
繼承性: | no |
版本: | CSS3 |
JavaScript 語法: | object.style.transitionProperty="width,height" |
語法
transition-property: none|all|property;
值 | 描述 |
---|---|
none | 沒有屬性會獲得過渡效果。 |
all | 所有屬性都將獲得過渡效果。 |
property | 定義應用過渡效果的 CSS 屬性名稱列表,列表以逗號分隔。 |
更多建議: