|
timing-function
timing-function算是Transition屬性中最為復(fù)雜的一個(gè)了。它針對(duì)了過(guò)渡效果的特效，有多種特效展示。這里得涉及到一個(gè)學(xué)術(shù)性的話題：貝茲曲線。W3C給出的一張曲線圖。
cubic-bezier即為貝茲曲線中的繪制方法。圖上有四點(diǎn)，P0-3，其中P0、P3是默認(rèn)的點(diǎn)，對(duì)應(yīng)了[0,0],
[1,1]。而剩下的P1、P2兩點(diǎn)則是我們通過(guò)cubic-bezier()自定義的。cubic-bezier(x1, y1, x2, y2)
為自定義，x1,x2,y1,y2的值范圍在[0, 1]。
預(yù)留的幾個(gè)特效：
ease: cubic-bezier(0.25,
0.1, 0.25, 1.0)
linear:
cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in:
cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out:
cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out:
cubic-bezier(0.42, 0, 0.58, 1.0)
__________________________________________________________________________________________________
貝塞爾曲線
1、線性曲線
![線性貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]](http://image66.360doc.com/DownloadImg/2013/10/2523/36241472_2.gif "CSS3 <wbr>timing-function <wbr>貝塞爾曲線") |
| 線性貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1] |
2、二次曲線
為建構(gòu)二次貝塞爾曲線，可以中介點(diǎn)Q0和Q1作為由0至1的t：
-
由P0至P1的連續(xù)點(diǎn)Q0，描述一條線性貝塞爾曲線。
-
由P1至P2的連續(xù)點(diǎn)Q1，描述一條線性貝塞爾曲線。
- 由Q0至Q1的連續(xù)點(diǎn)B（t），描述一條二次貝塞爾曲線。
二次貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]
3、高階曲線
為建構(gòu)高階曲線，便需要相應(yīng)更多的中介點(diǎn)。對(duì)于三次曲線，可由線性貝塞爾曲線描述的中介點(diǎn)Q0、Q1、Q2，和由二次曲線描述的點(diǎn)R0、R1所建構(gòu)：
 |
|
![三次貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]](http://image66.360doc.com/DownloadImg/2013/10/2523/36241472_6.gif "CSS3 <wbr>timing-function <wbr>貝塞爾曲線") |
| 三次貝塞爾曲線的結(jié)構(gòu) |
|
三次貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]
|
對(duì)于四次曲線，可由線性貝塞爾曲線描述的中介點(diǎn)Q0、Q1、Q2、Q3，由二次貝塞爾曲線描述的點(diǎn)R0、R1、R2，和由三次貝塞爾曲線描述的點(diǎn)S0、S1所建構(gòu)：
 |
|
![四次貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]](http://image66.360doc.com/DownloadImg/2013/10/2523/36241472_8.gif "CSS3 <wbr>timing-function <wbr>貝塞爾曲線") |
| 四次貝塞爾曲線的結(jié)構(gòu) |
|
四次貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1] |
|
![二次貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]](http://zh./wiki/File:Bezier_2_big.gif "CSS3 <wbr>timing-function <wbr>貝塞爾曲線")
![線性貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]](http://zh./wiki/File:Bezier_1_big.gif "CSS3 <wbr>timing-function <wbr>貝塞爾曲線")
![三次貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]](http://zh./wiki/File:Bezier_3_big.gif "CSS3 <wbr>timing-function <wbr>貝塞爾曲線")
![四次貝塞爾曲線演示動(dòng)畫(huà)，t in [0,1]](http://zh./wiki/File:Bezier_4_big.gif "CSS3 <wbr>timing-function <wbr>貝塞爾曲線")
