Style transition 屬性
Style 對象實(shí)例
把鼠標(biāo)指針懸停在 div 元素上，它的外觀會(huì)逐漸改變：
document.getElementById("myDIV").style.transition="all 2s";
嘗試一下 ?
定義和用法
transition 屬性是一個(gè)速記屬性，用于設(shè)置四個(gè)過渡屬性：
transitionProperty、 transitionDuration、 transitionTimingFunction 和 transitionDelay.
注意：請始終設(shè)置 transitionDuration 屬性，否則持續(xù)時(shí)間為 0，就不會(huì)產(chǎn)生過渡效果。
瀏覽器支持
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。
Safari 支持另一個(gè)可替代該屬性的屬性，即 WebkitTransition 屬性。
注意：Internet Explorer 9 及其之前的版本不支持 transition 屬性。
語法
返回 transition 屬性：
object.style.transition
設(shè)置 transition 屬性：
object.style.transition="property duration timing-function delay|initial|inherit"
屬性值
| 值 | 描述 |
|---|---|
| transitionProperty | 規(guī)定應(yīng)用過渡效果的 CSS 屬性的名稱。 |
| transitionDuration | 規(guī)定完成過渡效果需要多少秒或毫秒。 |
| transitionTimingFunction | 規(guī)定過渡效果的速度曲線。 |
| transitionDelay | 定義過渡效果何時(shí)開始。 |
| initial | 設(shè)置該屬性為它的默認(rèn)值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
技術(shù)細(xì)節(jié)
| 默認(rèn)值： | all 0 ease 0 |
|---|---|
| 返回值： | 字符串，表示元素的 transition 屬性。 |
| CSS 版本 | CSS3 |
相關(guān)文章
CSS 參考手冊：transition 屬性
更多建議：