例
從開始到結束播放動畫以相同的速度：
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} 試一試» 更多"Try it Yourself"下面的例子。
定義和用法
動畫定時功能指定動畫的速度曲線。
速度曲線定義動畫使用從一組CSS樣式更改為另一個時間。
該速度曲線是用來進行變更順利。
| 默認值： | ease |
|---|---|
| 遺傳： | no |
| 動畫： | no. Read about animatable |
| 版： | CSS3 |
| JavaScript語法： | object .style.animationTimingFunction="linear" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-，-moz-，或-O-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -O- |
CSS語法
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit; 動畫定時函數使用一個數學函數，稱為三次貝塞爾曲線，以使速度曲線。 您可以在此函數中使用您自己的值，或使用預先定義的值之一：
屬性值
| 值 | 描述 | 播放 |
|---|---|---|
| linear | 動畫具有從開始以相同的速度來結束 | 播放 ” |
| ease | 默認值。 動畫有一個緩慢的開始，那時快，它結束前慢慢 | 播放 ” |
| ease-in | 動畫有一個緩慢的開始 | 播放 ” |
| ease-out | 動畫有一個緩慢的結束 | 播放 ” |
| ease-in-out | 動畫既有慢啟動和慢結束 | 播放 ” |
| step-start | 相當於steps(1, start) | |
| step-end | 相當於steps(1, end) | |
| steps(int,start|end) | 指定一個步進功能，具有兩個參數。 第一個參數指定在函數間隔數。 它必須是一個正整數(greater than 0) 第二個參數，這是可選的，或者是值"start"或"end" ，和指定在發生的時間間隔內的值的變化的點。 如果省略第二個參數，它被賦予值"end" | |
| cubic-bezier( n , n , n , n ) | 定義了立方貝塞爾函數自己的價值觀 可能的值是從0到1的數值 | |
| initial | 將此屬性設置為默認值。 閱讀關於初始 | |
| inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
Tip:試著在試一試下面部分不同的價值觀。
更多示例
例
為了更好地理解不同的定時功能價值;
這裡有五個不同<div>五種不同值的元素：
/* For Chrome, Safari and 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;}
/* Standard
syntax */
#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;}
試一試» 例
與上述相同的例子，但速度曲線與立方貝塞爾函數定義為：
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,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);}
/* Standard syntax */
#div1 {animation-timing-function: cubic-bezier(0,0,1,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);} 試一試» 相關頁面
CSS3教程： CSS3動畫
HTML DOM參考： animationTimingFunction property