Style animationTimingFunction 屬性

定義和用法

animationTimingFunction 規定動畫的速度曲線。

速度曲線定義了動畫從一組 CSS 樣式更改為另一組樣式的時間。

速度曲線用于平滑變化。

實例

更改 <div> 元素的 animationTimingFunction 屬性：

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

親自試一試

語法

返回 animationTimingFunction 屬性：

object.style.animationTimingFunction

設置 animationTimingFunction 屬性：

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

屬性值

值 描述
linear 動畫從頭到尾的速度是一樣的。
ease 默認值。動畫緩慢開始，然后加快，然后是緩慢結束。
ease-in 動畫緩慢開始。
ease-out 動畫緩慢結束。
ease-in-out 動畫既有緩慢的開始，也有緩慢的結束。
cubic-bezier(n, n, n, n)

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

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

技術細節

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

瀏覽器支持

animationTimingFunction 是 CSS3 (1999) 特性。

所有瀏覽器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
支持 支持 支持 支持 支持 11

相關頁面

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