從開始到結束以相同的速度播放動畫:
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
在此頁底部有更多的例子。
屬性
animation-timing-function
43.0
4.0 -webkit-
10.0
16.0
5.0 -moz-
9.0
30.0
15.0 -webkit-
12.0 -o-
animation-timing-function指定動畫将如何完成一個周期。
速度曲線定義動畫從一套 CSS 樣式變為另一套所用的時間。
速度曲線用于使變化更為平滑。
預設值:
ease
繼承:
no
版本:
CSS3
JavaScript 文法:
object object.style.animationTimingFunction="linear"
animation-timing-function: value;
animation-timing-function使用的數學函數，稱為三次貝塞爾曲線，速度曲線。使用此函數，您可以使用您自己的值，或使用預先定義的值之一：
值
描述
測試
linear
動畫從頭到尾的速度是相同的。
預設。動畫以低速開始，然後加快，在結束前變慢。
ease-in
動畫以低速開始。
ease-out
動畫以低速結束。
ease-in-out
動畫以低速開始和結束。
steps(int,start|end)
指定了時間函數中的間隔數量（步長）。有兩個參數，第一個參數指定函數的間隔數，該參數是一個正整數（大于 0）。 第二個參數是可選的，表示動畫是從時間段的開頭連續還是末尾連續。含義分别如下：
start：表示直接開始。
end：預設值，表示戛然而止。
cubic-bezier(n,n,n,n)
在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
<b>提示:</b> 請試着在下面的"嘗試一下"功能中使用不同的值。
為了更好地了解不同的定時函數值，這裡提供了設定五個不同值的五個不同的 div 元素：
/* Chrome, Safari 和 Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* 标準文法 */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
與上例相同，但是通過 cubic-bezier 函數來定義速度曲線：
#div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
CSS3 教程: CSS3 動畫