Cubic-bezier 曲线

cubic-bezier又称三次贝塞尔，主要是为animation生成速度曲线函数。

cubic-bezier(x1,y1,x2,y2)

此图中:

P0:(0,0) P1:(x1,y1) P2:(x2,y2) P3:(1,1)

（x1,x2 范围为 0-1）（y1,y2没规定，但是过大没必要也没意义。）

我对此曲线是这么理解的：假设P1，P2两个点为吸铁石，曲线是薄铁条（可以被吸铁石影响形状的那种）

那么这个曲线则是被 P1，P2两个吸铁石点拉扯形成的。

有一点需要注意，当这个点距离曲线越远，则拉扯力越大，曲线弧度越大。距离曲线越近，拉扯力越小，曲线弧度越小（这里和吸铁石相反。）

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6 
 7   <style>
 8     .animation {
 9       width: 50px;
10       height: 50px;
11       background-color: #ed3;
12       -webkit-transition:  all 2s cubic-bezier(.17, .86, .73, .14);
13            -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);
14               transition:  all 2s cubic-bezier(.17, .86, .73, .14);
15     }
16     .animation:hover {
17       -webkit-transform:  translateX(400px);
18           -ms-transform:  translateX(400px);
19            -o-transform:  translateX(400px);
20               transform:  translateX(400px);
21     }
22   </style>
23 </head>
24 <body>
25   <div class="animation"></div>
26 </body>
27 </html>