Style transition 屬性

定義和用法

transition 屬性是四個過渡屬性的簡寫屬性：

注釋：請始終規定 transitionDuration 屬性，否則持續時間為 0，過渡將無效。

另請參閱：

CSS 參考手冊：transition 屬性

實例

將鼠標懸停在 div 元素上以逐漸改變其外觀：

document.getElementById("myDIV").style.transition = "all 2s";

親自試一試

語法

返回 transition 屬性：

object.style.transition

設置 transition 屬性：

object.style.transition = "property duration timing-function delay|initial|inherit"

屬性值

值 描述
transitionProperty 規定過渡效果所針對的 CSS 屬性的名稱。
transitionDuration 規定過渡效果需要多少秒或毫秒才能完成。
transitionTimingFunction 規定過渡效果的速度曲線。
transitionDelay 定義過渡效果何時開始。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： all 0 ease 0
返回值： 字符串，表示元素的 transition 屬性。
CSS 版本： CSS3

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1