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];

　　　　想了解三次赛贝尔曲线，自行百度。

　　　　不想了解可以在这个网站上直接调节：http://www.roblaplaca.com/examples/bezierBuilder/#  得到参数。

　　　　网站进入较慢，需要等一会。

　　　　这是我自己做的，进入较快：http://ljhblog.top/link/cubic-bezier.html

作用

　　　　    在CSS3 中的动画效果中，设置速度运动曲线。

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

使用

　　默认ease：

　　　　　

　　ease-in：

　　　　　　

　　ease-out：

　　　　　　

　　ease-in-out：

　　　　　　　　

　　linear：

　　　　　　　　

后语

　　　　斜率表示速度的快慢，可以去上面的网站自己调，能实现各种效果。

　　　比如说这个，就可以在中间停一会：

　　　　

 

 

　　　　

 我的博客

转载于:https://www.cnblogs.com/seeks/p/7583484.html