css3 cubic-bezier用賽貝爾曲線定義速度曲線

簡介

　　　　  cubic-bezier 又稱三次貝塞爾，用四個點（p0,p1,p2,p3）描繪一條曲線。

　　　　 在css3中，p0默認為（0，0），p3默認為（1，1）。所以，我們只需關注p1，p2。

　　　    在css3動畫中，用來表示速度曲線。

　　關於三次賽貝爾曲線：

　　　　公式：B(t) = P₀(1 - t)³ + 3P₁t(1 - t)²+3P₂t²(1 - t) + P₃t³,  t ∈ [0, 1];

　　　　想了解三次賽貝爾曲線，自行百度。

　　　　不想了解可以在這個網站上直接調節：https://cubic-bezier.com/  得到參數。

作用

　　　　    在CSS3 中的動畫效果中，設置速度運動曲線。

　　　   animation-timing-function: cubic-bezier(x1,y1,x2,y2);

使用

　　默認ease：

　　　　　

　　ease-in：

　　　　　　

　　ease-out：

　　　　　　

　　ease-in-out：

　　　　　　　　

　　linear：

　　　　　　　　

后語

　　　　斜率表示速度的快慢，可以去上面的網站自己調，能實現各種效果。

　　　比如說這個，就可以在中間停一會：

　　　　

 

 

　　　　

 我的博客