文章主要介紹了css transition animation的使用（內(nèi)含貝賽爾曲線(xiàn)詳解），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，

區(qū)別：

transition也叫過(guò)渡動(dòng)畫(huà)，主要是用于讓一個(gè)元素從一種狀態(tài)過(guò)渡到另一種狀態(tài)效果，常用于主動(dòng)觸發(fā)的效果。例如移動(dòng)端的頁(yè)面切換（很常用）、button點(diǎn)擊效果（也很常見(jiàn)）。

animation才是css3正宗的動(dòng)畫(huà)，主要是用于實(shí)現(xiàn)某種持續(xù)的動(dòng)畫(huà)效果（當(dāng)然簡(jiǎn)單的過(guò)渡動(dòng)畫(huà)也可以實(shí)現(xiàn)），常用于自動(dòng)觸發(fā)的效果。例如加載中的持續(xù)動(dòng)畫(huà)效果等等。

在學(xué)習(xí)這兩種動(dòng)畫(huà)之前要最好是先了解一下 transition-timing-function（過(guò)渡效果時(shí)間曲線(xiàn)）；

舉個(gè)栗子：

比如一輛小汽車(chē)從a點(diǎn)到b點(diǎn)的運(yùn)動(dòng)過(guò)程是一個(gè)動(dòng)畫(huà)，那么過(guò)渡效果時(shí)間曲線(xiàn)就是這輛小汽車(chē)到底是勻速過(guò)去呢還是一直加速?zèng)_過(guò)去，又或者說(shuō)一會(huì)加速?zèng)_一會(huì)減速慢行。

這個(gè)屬性有五種可供選擇的屬性值和一種可以自定義的屬性值

自定義屬性值：cubic-bezier(n,n,n,n)

在了解這個(gè)自定義屬性值之前我們?cè)賮?lái)深入了解一下貝塞爾曲線(xiàn)。

為什么要了解貝塞爾曲線(xiàn)？因?yàn)檫@個(gè)自定義時(shí)間過(guò)渡曲線(xiàn)就是用貝塞爾曲線(xiàn)表示的。（這是一個(gè)三階的貝塞爾曲線(xiàn)）

貝塞爾曲線(xiàn)應(yīng)用場(chǎng)景有哪些？貝塞爾曲線(xiàn)不僅僅在描述速度、時(shí)間上會(huì)起作用，在ps中的色彩調(diào)節(jié)和一些建筑工程學(xué)上面都會(huì)有涉及。

那我們先來(lái)畫(huà)一個(gè)二階的貝塞爾曲線(xiàn)吧。

首先打開(kāi)ps，在一個(gè)平面內(nèi)隨便畫(huà)三個(gè)點(diǎn)a、b、c然后連接起來(lái)，如下圖。

然后在a、b中找到一點(diǎn)d，在b、c中找到一點(diǎn)e，滿(mǎn)足公式：ad/ab = be/bc

然后呢，連接d、e，在de線(xiàn)上找到一點(diǎn)f，滿(mǎn)足公式：df/de = ad/ab = be/bc

然后就沒(méi)有然后了，因?yàn)檫@個(gè)二階貝塞爾曲線(xiàn)已經(jīng)畫(huà)完了，這個(gè)曲線(xiàn)就是所有可能的f點(diǎn)。

然后我用谷歌瀏覽器調(diào)試工具再演示一下二階貝塞爾曲線(xiàn)圖（本來(lái)是想用火狐演示的，但是火狐瀏覽器調(diào)試曲線(xiàn)的時(shí)候?qū)蛹?jí)有點(diǎn)高，還很敏感，無(wú)法用gif工具錄制，所以就放棄了，但實(shí)際上我更喜歡火狐的調(diào)試動(dòng)畫(huà)調(diào)試工具一點(diǎn)。）

1、上面的球代表動(dòng)畫(huà)執(zhí)行的過(guò)程，球越快，顏色越淺，反之越深。

2、兩個(gè)固定點(diǎn)的坐標(biāo)是（0，0）和（1，1）

3、可調(diào)試點(diǎn)的坐標(biāo)是隨意拉動(dòng)的，x軸要在0-1之間，y軸隨意。

4、x軸代表的時(shí)間，y軸代表的是路程（因?yàn)楹芏鄤?dòng)畫(huà)并不是簡(jiǎn)單的左右移動(dòng)，所以以后要理解成動(dòng)畫(huà)執(zhí)行的過(guò)程），注意：y軸不是速度，更不是加速度哦。

5、最下面的是cubic-bezier屬性具體取到的值（后面再講里面4個(gè)值得具體含義）

但實(shí)際開(kāi)發(fā)過(guò)程中我們用到的大部分都是三階貝塞爾曲線(xiàn)（當(dāng)然也有用多階貝塞爾曲線(xiàn)的），也就是用兩個(gè)點(diǎn)去控制曲線(xiàn)的弧度，具體原理和上面的類(lèi)似，如圖：

現(xiàn)在就可以解釋cubic-bezier為什么有四個(gè)值，就是這個(gè)兩個(gè)坐標(biāo)點(diǎn)。

再次聲明一下，y軸是距離，不是速度和加速度

cubic-bezier屬性還有五個(gè)可供選擇的值：（其實(shí)就是幾種寫(xiě)死的過(guò)渡效果曲線(xiàn)）

·linear      規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。
   ·ease       規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
   ·ease-in        規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
   ·ease-out       規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
   ·ease-in-out        規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。