cubic-bezier 又稱三次貝塞爾，主要是為 animation 生成速度曲線的函數，規定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。
我們可以從下圖中簡要理解一下 cubic-bezier：
從上圖我們需要知道的是 cubic-bezier 的取值范圍:
- P0：默認值 (0, 0)
- P1：動態取值 (x1, y1)
- P2：動態取值 (x2, y2)
- P3：默認值 (1, 1)
我們需要關注的是 P1 和 P2 兩點的取值，而其中 X 軸的取值范圍是 0 到 1，當取值超出范圍時 cubic-bezier 將失效；Y 軸的取值沒有規定，當然也毋須過大。
最直接的理解是，將以一條直線放在范圍只有 1 的坐標軸中，並從中間拿出兩個點來拉扯（X 軸的取值區間是 [0, 1]，Y 軸任意），最后形成的曲線就是動畫的速度曲線。
使用
在測試例子中：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .animation { width: 50px; height: 50px; background-color: #ed3; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; } .animation:hover { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } </style> </head> <body> <div class="animation"></div> </body> </html>
一個在線實測的地址http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67
作者：Jovey
鏈接：http://www.jianshu.com/p/d999f090d333
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
鏈接：http://www.jianshu.com/p/d999f090d333
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。