贝塞尔曲线

缓动函数有三种类型：1. 线性，2. 三次贝塞尔，3. 阶跃

贝塞尔曲线

贝塞尔曲线（读作 [bezje]）是一种使用数学方法描述的曲线，被广泛用于计算机图形学和动画中。在矢量图中，贝塞尔曲线用于定义可无限放大的光滑曲线。

贝塞尔曲线由至少两个控制点进行描述。Web 技术中使用的是三次贝塞尔曲线，即使用四个控制点 P0、P1、P2 和 P3 描述的曲线。

在绘制二次贝塞尔曲线的过程中，需要先作两条辅助线：P0 到 P1 和 P1 到 P2；第三条辅助线从其起点稳步移动到第一辅助线上，终点在第二辅助线上。在这条辅助线上，有一个点从其起点稳步移动到其终点。这个点描述的曲线就是贝塞尔曲线。以下是一个动画示例，展示了曲线的创建过程：

CSS 中的贝塞尔缓动函数

ease

表示插值缓慢开始，陡然加速，再逐渐减速至结束。此关键字表示缓动函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。其与 ease-in-out 相似，但在开始时加速更陡。

ease-in

表示插值缓慢开始，再逐渐加速至结束，最终突然停止。此关键字表示缓动函数 cubic-bezier(0.42, 0.0, 1.0, 1.0)。

ease-out

表示插值突然开始，再逐渐减速至结束。此关键字表示缓动函数 cubic-bezier(0.0, 0.0, 0.58, 1.0)。

ease-in-out

表示插值缓慢开始，然后加速，再减速至结束。此关键字表示缓动函数 cubic-bezier(0.42, 0.0, 0.58, 1.0)。在开始时，此关键字表现同 ease-in 关键字；在结束时，表现同 ease-out 关键字。

.container {
  position: relative;
  height: 100px;
}
.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(circle at 10px 10px,rgba(25, 255, 255, 0.8),rgba(25, 255, 255, 0.4));
  border-radius: 50%;
  top: 25px;
  animation: move-right 1.5s infinite alternate ease-in-out;
}
@keyframes move-right {
  from {
    left: 10%;
  }
  to {
    left: 90%;
  }
}

如下图：

阶跃缓动函数

函数 steps() 定义了将输出值域分为等距步长的阶跃函数。此类阶跃函数有时也称为阶梯函数。

.container {
  position: relative;
  height: 100px;
}
.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(circle at 10px 10px,rgba(25, 255, 255, 0.8),rgba(25, 255, 255, 0.4));
  border-radius: 50%;
  top: 25px;
  animation: move-right 1.5s infinite alternate steps(5, jump-start);
}
@keyframes move-right {
  from {
    left: 10%;
  }
  to {
    left: 90%;
  }
}

如下图：