如果看网上参考资料,会发现,cubic-bezier 有 4 个参数,这 4 个参数的含义是 n、n、n、n,这命名,也太差了吧。
其实应该是:cubic-bezier(x1, y1, x2, y2),对应 2 个点的坐标,这 2 个点如下,只要一看图就明白了。
这个我们可以在浏览器 F12 中去调试生成我们想要的效果的。cubic-bezier 通过合适的参数值,是可以代替 ease、ease-in、ease-out 等的。
网上说,这 4 个参数值是 0 到 1,但实际上只有 x 是 0 到 1,y 是可以大于 1、小于 0 的。
cubic-bezier 还有一个很棒的效果,是可以制造回弹效果,就像弹珠掉地上弹几下这种。