Latest web development tutorials

HTML DOM Style transition 屬性

Style 對象參考手冊 Style對象

實例

把鼠標指針懸停在div 元素上，它的外觀會逐漸改變：

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

嘗試一下»

定義和用法

transition 屬性是一個速記屬性，用於設置四個過渡屬性：

transitionProperty、 transitionDuration、 transitionTimingFunction 和transitionDelay.

注意：請始終設置transitionDuration屬性，否則持續時間為0，就不會產生過渡效果。

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10、Firefox、Opera 和Chrome 支持transition 屬性。

Safari 支持另一個可替代該屬性的屬性，即WebkitTransition 屬性。

注意： Internet Explorer 9及其之前的版本不支持transition屬性。

語法

返回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

相關文章

CSS參考手冊： transition屬性

Style 對象參考手冊 Style對象