對於css3的transitions，網上很多介紹，相信大家都比較了解，這裡用最簡單的方式介紹下：
transition語法：
transition:;
例如 transition:all 2.5s linear 0.2s;
表示全部屬性變化，持續2.5秒，緩衝效果為linear，延遲0.2s執行；
對於緩衝效果，很多**只介紹了預設提供的：ease, linear, ease-in, ease-out, ease-in-out
這對於複雜動畫效果來說是遠遠不夠的，其實還有乙個更強大的屬性叫：cubic-bezier(x1, y1, x2, y2)來設定動畫的貝塞爾曲線。
cubic-bezier為通過貝塞爾曲線來計算「轉換」過程中的屬性值，如下曲線所示，通過改變p1(x1, y1)和p2(x2, y2)的座標可以改變整個過程的output percentage。w3c文件中表述是所有值需在[0, 1]區域內，否則無效。但是在一些瀏覽器（chrome，firefox，opera，ie11 預覽版）下對p1(x1, y1)和p2(x2, y2)的座標中的y1和y2並沒有這個限制，曲線可以是負值，也可以取大於1的值。如果x1和x2是負數，或者大於1的值那麼直接應用最終樣式沒有過渡效果。而一些老版本的瀏覽器曲線值仍需在[0, 1]區域內，否則直接應用最終樣式，比如opera 12，和老版本的webkit瀏覽器,其他沒測試。
而(x1, y1, x2, y2)的引數怎麼獲取呢，cubic-bezier.com 提供了詳細的演示。
於是，了解過後，我們製作乙個demo看看效果：
貝塞爾曲線
1.概述 貝塞爾曲線 b zier curve 又稱 貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程式的數學曲線。一般的向量圖形 軟體通過它來精確畫出曲線，貝茲曲線由 線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。貝塞爾曲線是計算機圖形學...
貝塞爾曲線
由於工作需要，最近在研究乙個類似qq訊息劃掉的效果 很多強迫症患者童鞋對這個簡直是愛不釋手，當然這個也包括我自己 貝塞爾曲線就是這樣的一條曲線，它是依據四個位置任意的點座標繪製出的一條 光滑曲線 在歷史上，研究貝塞爾曲線的人最初是按照已知曲線 引數方程 來確定四個點的思路設計出這種向量曲線繪製法。貝...
貝塞爾曲線
貝塞爾曲線在android中運用廣泛，可以用來繪製各類複雜曲線，因為貝塞爾曲線只需要指定控制點，就能繪製出特定的曲線。其次是做點和點的平滑過渡。為什麼可以做到如上兩點，看下面的講解 首先來說，貝塞爾曲線有階的概念，這個階可以理解為控制點，一階的控制點只有兩個。如上是一階的方程，其中t取值為0到1，可...