物理学中，有 vt 图和 st 图，vt 图就是随着时间的变化速度的变化趋势，而 st 图就是随着时间的变化距离的变化趋势。简单来说，vt 图可以表示某一个时间点的运动速度，而 st 图可以表示某一个时间点的距离。

如果读者有一定的微积分知识，会知道 st 图的导函数其实就是 vt 图。

在 CSS 中我们可以定义三次贝赛尔曲线，这种贝赛尔曲线在表示运动状态的时候其实就是一个 st 图，只要是能和运动状态相关的地方都可以用三次贝赛尔曲线，例如 transition，包括后面的 amination，哪怕在其他地方的应用也是很广泛。

在现代的浏览器调试工具中，不管是 firefox 还是 chrome，都提供了贝塞尔曲线的可视化编辑工具，这里看到的贝赛尔曲线其实就是一个 st 图，t 的范围是 0 到 1，我们可以通过这种可视化工具轻易完成贝赛尔曲线的编辑。

CSS 允许我们通过 cubic-bezier() 函数构造一个三次贝赛尔曲线，要构造一个三次贝赛尔曲线，需要两个点，每个点都有横坐标和纵坐标，所以一共其实会传入四个值，即 cubic-bezier(x1,y1,x2,y2) ，其中第一个点的坐标为 (x1,y1)，第二个点的坐标为 (x2,y2)。这两个点称为控制点。

对于三次贝赛尔曲线而言，一共有两个控制点，对于 n 次贝赛尔曲线，一共有 n-1 个控制点。

除了控制点以外，贝塞尔曲线还有起点和终点，所以对于三次贝赛尔曲线，一共由四个点组成。贝塞尔曲线的起点和终点固定，起点一定是 (0,0)，终点一定是 (1,1)

既然这个贝塞尔曲线是一个 st 图，而我们关注的其实是运动速度，所以我们更关心 st 图的斜率，当斜率越大运动越快，斜率越慢运动越缓。如果斜率为负数，则会向反方向移动。

一般来说，我们使用浏览器调试工具就可以很轻松地绘制一个贝赛尔曲线