css深入剖析timing-function的cubic-bezier

一、cubic-bezier

1.斜率

我们都知道在坐标系的第一象限，斜率代表着斜线上升趋势的快慢

2.贝塞尔曲线

而cubic-bezier的计算方式即三次为贝塞尔曲线(Bézier curve)，这里最好理解的方式即为通过它的斜率去理解：

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        transition: all 2s cubic-bezier(0,0,1,1);
    }
    div:hover{
        width: 200px;
        height: 200px;
    }
</style>

通过审查元素找到cubic-bezier的属性值，浏览器为了方便我们调试，可以在这里进行调试，上方的球为运动效果展示

通过这里我们就会发现通过两个控制点调节它们线形图，通过斜率我们能很快计算出最终的运动方式。

当将线形图调节成下面情况时，将向反方向运动一定距离后再正向运动，接着超出界限一定距离后再返回界限值

通过熟悉应用三次贝塞尔曲线，可以设置过渡动画的过渡曲线。