在了解cubic-bezier之前，你需要對 css3 中的動畫效果有所認識，它是animation-timing-function和transition-timing-function中乙個重要的內容。
cubic-bezier又稱三次貝塞爾，主要是為animation生成速度曲線的函式，規定是cubic-bezier(, , , )。
我們可以從下圖中簡要理解一下cubic-bezier：
從上圖我們需要知道的是cubic-bezier的取值範圍:
我們需要關注的是 p1 和 p2 兩點的取值，而其中x 軸的取值範圍是 0 到 1，當取值超出範圍時cubic-bezier將失效；y 軸的取值沒有規定，當然也毋須過大。
最直接的理解是，將以一條直線放在範圍只有 1 的座標軸中，並從中間拿出兩個點來拉扯（x 軸的取值區間是 [0, 1]，y 軸任意），最後形成的曲線就是動畫的速度曲線。
在測試例子中：
在例子中，當我們不為transition新增cubic-bezier或是其他timing-function時，預設的速度曲線是ease，此時的速度曲線是：
那麼讓我們在**中加入cubic-bezier(.17, .86, .73, .14)：
...
.animation
...
ease：cubic-bezier(.25, .1, .25, 1)
liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
ease-in：cubic-bezier(.42, 0, 1, 1)
ease-out：cubic-bezier(0, 0, .58, 1)
ease-in-out：cubic-bezier(.42, 0, .58, 1)
in out . back（來回的緩衝效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)
文章所提到的動畫效果可以在下面站點中看到，當然你也可以大膽嘗試：
css3 動畫（二）貝塞爾曲線
有過渡效果的屬性 過渡時長 過渡函式？過渡時延 其中，1 2 以及 4 都挺好理解的，但是3是個什麼東西？其實3是 css3 中的 timing function，其中3有兩種型別的值 本篇就總結一下 cubic bezier x1,y1,x2,y2 立方貝塞爾曲線 貝塞爾曲線 bezier cur...
貝賽爾曲線
貝塞爾曲線又稱貝茲曲線或貝濟埃曲線，一般的向量圖形軟體通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。當然在一些比較成熟的點陣圖軟體中也有貝塞爾曲線工具，如photoshop等。在flash4中還沒有完整的...
CSS 貝塞爾曲線 cubic bezier
cubic bezier又稱三次貝塞爾，主要是為animation生成速度曲線的函式，規定是cubic bezier 我們可以從下圖中簡要理解一下cubic bezier 從上圖我們需要知道的是cubic bezier的取值範圍 我們需要關注的是 p1 和 p2 兩點的取值，而其中x 軸的取值範圍是...