實(shí)例
把鼠標(biāo)指針?lè)诺?div 元素上,會(huì)產(chǎn)生帶有平滑改變?cè)貙挾鹊倪^(guò)渡效果:
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 屬性。
注釋?zhuān)篒nternet Explorer 9 以及更早版本的瀏覽器不支持 transition-property 屬性。
定義和用法
transition-property 屬性規(guī)定應(yīng)用過(guò)渡效果的 CSS 屬性的名稱(chēng)。(當(dāng)指定的 CSS 屬性改變時(shí),過(guò)渡效果將開(kāi)始)。
提示:過(guò)渡效果通常在用戶(hù)將鼠標(biāo)指針浮動(dòng)到元素上時(shí)發(fā)生。
注釋?zhuān)赫?qǐng)始終設(shè)置 transition-duration 屬性,否則時(shí)長(zhǎng)為 0,就不會(huì)產(chǎn)生過(guò)渡效果。
默認(rèn)值: | all |
---|---|
繼承性: | no |
版本: | CSS3 |
JavaScript 語(yǔ)法: | object.style.transitionProperty="width,height" |
語(yǔ)法
transition-property: none|all|property;
值 | 描述 |
---|---|
none | 沒(méi)有屬性會(huì)獲得過(guò)渡效果。 |
all | 所有屬性都將獲得過(guò)渡效果。 |
property | 定義應(yīng)用過(guò)渡效果的 CSS 屬性名稱(chēng)列表,列表以逗號(hào)分隔。 |
更多建議: