CSS3 animation-timing-function 屬性
實(shí)例
從開(kāi)頭到結(jié)尾以相同的速度來(lái)播放動(dòng)畫(huà)：
div
{
animation-timing-function:2s;
-webkit-animation-timing-function:2s; /* Safari 和 Chrome */
}
瀏覽器支持
Internet Explorer 10、Firefox 以及 Opera 支持 animation-timing-function 屬性。
Safari 和 Chrome 支持替代的 -webkit-animation-timing-function 屬性。
注釋?zhuān)?/span>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 屬性。
定義和用法
animation-timing-function 規(guī)定動(dòng)畫(huà)的速度曲線(xiàn)。
速度曲線(xiàn)定義動(dòng)畫(huà)從一套 CSS 樣式變?yōu)榱硪惶姿玫臅r(shí)間。
速度曲線(xiàn)用于使變化更為平滑。
| 默認(rèn)值： | ease |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語(yǔ)法： | object.style.animationTimingFunction="linear" |
語(yǔ)法
animation-timing-function: value;
animation-timing-function 使用名為三次貝塞爾（Cubic Bezier）函數(shù)的數(shù)學(xué)函數(shù)，來(lái)生成速度曲線(xiàn)。您能夠在該函數(shù)中使用自己的值，也可以預(yù)定義的值：
| 值 | 描述 | 測(cè)試 |
|---|---|---|
| linear | 動(dòng)畫(huà)從頭到尾的速度是相同的。 | 測(cè)試 |
| ease | 默認(rèn)。動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢。 | 測(cè)試 |
| ease-in | 動(dòng)畫(huà)以低速開(kāi)始。 | 測(cè)試 |
| ease-out | 動(dòng)畫(huà)以低速結(jié)束。 | 測(cè)試 |
| ease-in-out | 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束。 | 測(cè)試 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數(shù)中自己的值�？赡艿闹凳菑� 0 到 1 的數(shù)值。 |
提示：請(qǐng)?jiān)囍谙旅娴摹坝H自試一試”功能中使用不同的值。
親自試一試 - 實(shí)例
實(shí)例 1
為了更好地理解不同的定時(shí)函數(shù)值，這里提供了設(shè)置五個(gè)不同值的五個(gè)不同的 div 元素：
/* W3C 和 Opera: */ #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;} /* Firefox: */ #div1 {-moz-animation-timing-function: linear;} #div2 {-moz-animation-timing-function: ease;} #div3 {-moz-animation-timing-function: ease-in;} #div4 {-moz-animation-timing-function: ease-out;} #div5 {-moz-animation-timing-function: ease-in-out;} /* Safari 和 Chrome: */ #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;}
實(shí)例 2
與上例相同，但是通過(guò) cubic-bezier 函數(shù)來(lái)定義速度曲線(xiàn)：
/* W3C 和 Opera: */ #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);} /* Firefox: */ #div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1);} #div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Safari 和 Chrome: */ #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);}
相關(guān)頁(yè)面
CSS3 教程：CSS3 動(dòng)畫(huà)