cubic-bezier()函数是三次方贝塞尔曲线函数。所有三次方贝塞尔曲线都是由起点、终点和两个控制点组成，在SVG或者Canvas中，三次方贝塞尔曲线的所有控制点都是不固定的。但是在CSS的cubic-bezier()函数中，起点和终点的坐标是固定的，分别是(0,0)和(1,1)，因此，cubic-bezier()函数支持的
参数值只有4个，代表了两个控制点的坐标，语法如下：
cubic-bezier(x1, y1, x2, y2)
其中坐标(x1,y1)表示控制点1的坐标，坐标(x2,y2)表示控制点2的坐标。
标准的cubic-bezier()函数值的取值范围是0～1，超出1时，可以实现回弹效果
.target { transition: 1s cubic-bezier(.16, .67, .28, 1.46); } .target.run { transform: translateX(200px); }
常用缓动类型的贝塞尔曲线值
:root { --ease-in-quad: cubic-bezier(.55, .085, .68, .53); --ease-in-cubic: cubic-bezier(.55, .055, .675, .19); --ease-in-quart: cubic-bezier(.895, .03, .685, .22); --ease-in-quint: cubic-bezier(.755, .05, .855, .06); --ease-in-expo: cubic-bezier( .95, .05, .795, .035); --ease-in-circ: cubic-bezier( .6, .04, .98, .335); --ease-out-quad: cubic-bezier( .25, .46, .45, .94); --ease-out-cubic: cubic-bezier( .215, .61, .355, 1); --ease-out-quart: cubic-bezier( .165, .84, .44, 1); --ease-out-quint: cubic-bezier( .23, 1, .32, 1); --ease-out-expo: cubic-bezier(.19, 1, .22, 1); --ease-out-circ: cubic-bezier(.075, .82, .165, 1); --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955); --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1); --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1); --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1); --ease-in-out-expo: cubic-bezier(l, 0, 0, 1); --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86); }
在线调试可使用官网
https://cubic-bezier.com/#.17,.67,.83,.67
