文章主要介紹了css transition animation的使用（內含貝賽爾曲線詳解），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，

區別：

transition也叫過渡動畫，主要是用于讓一個元素從一種狀態過渡到另一種狀態效果，常用于主動觸發的效果。例如移動端的頁面切換（很常用）、button點擊效果（也很常見）。

animation才是css3正宗的動畫，主要是用于實現某種持續的動畫效果（當然簡單的過渡動畫也可以實現），常用于自動觸發的效果。例如加載中的持續動畫效果等等。

在學習這兩種動畫之前要最好是先了解一下 transition-timing-function（過渡效果時間曲線）；

舉個栗子：

比如一輛小汽車從a點到b點的運動過程是一個動畫，那么過渡效果時間曲線就是這輛小汽車到底是勻速過去呢還是一直加速沖過去，又或者說一會加速沖一會減速慢行。

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

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

在了解這個自定義屬性值之前我們再來深入了解一下貝塞爾曲線。

為什么要了解貝塞爾曲線？因為這個自定義時間過渡曲線就是用貝塞爾曲線表示的。（這是一個三階的貝塞爾曲線）

貝塞爾曲線應用場景有哪些？貝塞爾曲線不僅僅在描述速度、時間上會起作用，在ps中的色彩調節和一些建筑工程學上面都會有涉及。

那我們先來畫一個二階的貝塞爾曲線吧。

首先打開ps，在一個平面內隨便畫三個點a、b、c然后連接起來，如下圖。

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

然后呢，連接d、e，在de線上找到一點f，滿足公式：df/de = ad/ab = be/bc

然后就沒有然后了，因為這個二階貝塞爾曲線已經畫完了，這個曲線就是所有可能的f點。

然后我用谷歌瀏覽器調試工具再演示一下二階貝塞爾曲線圖（本來是想用火狐演示的，但是火狐瀏覽器調試曲線的時候層級有點高，還很敏感，無法用gif工具錄制，所以就放棄了，但實際上我更喜歡火狐的調試動畫調試工具一點。）

1、上面的球代表動畫執行的過程，球越快，顏色越淺，反之越深。

2、兩個固定點的坐標是（0，0）和（1，1）

3、可調試點的坐標是隨意拉動的，x軸要在0-1之間，y軸隨意。

4、x軸代表的時間，y軸代表的是路程（因為很多動畫并不是簡單的左右移動，所以以后要理解成動畫執行的過程），注意：y軸不是速度，更不是加速度哦。

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

但實際開發過程中我們用到的大部分都是三階貝塞爾曲線（當然也有用多階貝塞爾曲線的），也就是用兩個點去控制曲線的弧度，具體原理和上面的類似，如圖：

現在就可以解釋cubic-bezier為什么有四個值，就是這個兩個坐標點。

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

cubic-bezier屬性還有五個可供選擇的值：（其實就是幾種寫死的過渡效果曲線）

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