Style transitionTimingFunction 屬性

定義和用法

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

此屬性允許過渡效果在其持續時間內改變速度。

另請參閱：

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

實例

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

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

親自試一試

語法

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

在三次貝塞爾函數中定義您自己的值。

可能的值是從 0 到 1 的數值。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

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

瀏覽器支持

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

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