Style transitionTimingFunction 屬性

Style 對象參考手冊 Style 對象

實例

改變過渡效果的速度曲線：

document.getElementById("myDIV").style.transitionTimingFunction="linear";

定義和用法

transitionTimingFunction 屬性規定過渡效果的速度曲線。

該屬性允許過渡效果隨著時間來改變其速度。

流覽器支持

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

語法

返回 transitionTimingFunction 屬性：

object.style.transitionTimingFunction

設置 transitionTimingFunction 屬性：

object.style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"

屬性值

值 描述
ease 默認值。規定慢速開始，然後變快，然後慢速結束的過渡效果（相當於 cubic-bezier(0.25,0.1,0.25,1)）。
linear 規定從開始到結束都保持相同速度的過渡效果（相當於 cubic-bezier(0,0,1,1)）。
ease-in 規定以慢速開始的過渡效果（相當於 cubic-bezier(0.42,0,1,1)）。
ease-out 規定以慢速結束的過渡效果（相當於 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規定以慢速開始和結束的過渡效果（相當於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
initial 設置該屬性為它的默認值。請參閱 initial。
inherit 從父元素繼承該屬性。請參閱 inherit。

技術細節

默認值： ease
返回值： 字串，表示元素的 transition-timing-function 屬性。
CSS 版本 CSS3

相關文章

CSS 參考手冊：transition-timing-function 屬性

Style 對象參考手冊 Style 對象