<easing-function>

linear

指定一个恒定的插值速率，在整个持续时间内进度速率没有变化（即没有加速或减速）。此关键字值等效于 cubic-bezier(0, 0, 1, 1) 和 linear(0, 1) 函数。

<linear-easing-function>

指定一个带有一个或多个逗号分隔的线性停止点的linear()函数，每个停止点包含最多两个可选的停止长度，以控制动画或过渡的进度。

linear() 函数指定一个<linear-stop-list>，一个逗号分隔的动画或过渡进度中的点列表。列表中的每个点或<linear-stop> 都指定为0到1之间的<number>。默认情况下，<linear-stop-list> 中的每个停止点都是等距的。为了更好地控制动画或过渡的进度，每个点可以包含最多两个可选的<percentage> <linear-stop-length> 值。

• <number>：表示动画或过渡持续时间中的一个时间点。值0表示迭代的开始，1表示结束。也允许使用 0 到 1 范围之外的值。
• <percentage>：指示线性停止点在持续时间中的位置。它最多可以取两个值。如果指定一个值，则定义相关线性停止点的开始。如果指定两个百分比值，则定义停止点的长度：第一个百分比指示起始点，第二个百分比指示动画或过渡中该段的结束点。如果未指定<percentage> 值（默认为），则停止点将均匀地分布在时间线上。

<cubic-bezier-easing-function>

指定一个贝塞尔曲线来塑造动画或过渡的进度。在 CSS 中，贝塞尔曲线由四个控制点定义，这些控制点以数学方式描述曲线：一个起始点、一个结束点和两个控制点。三次贝塞尔缓动函数可以通过以下两种方式之一定义：通过使用四参数cubic-bezier() 函数调用创建自定义曲线，或使用其中一个预定义的关键字值，这些值映射到常用的贝塞尔曲线参数。预定义的关键字值包括

ease：此关键字表示缓动函数cubic-bezier(0.25, 0.1, 0.25, 1)。它表示插值开始缓慢，然后急剧加速，然后逐渐减速到结束。它类似于ease-in-out 关键字，尽管它在开始时加速得更剧烈。

ease-in：此关键字表示缓动函数cubic-bezier(0.42, 0, 1, 1)。它表示插值开始缓慢，然后逐渐加速直到结束，此时它会突然停止。

ease-out：此关键字表示缓动函数cubic-bezier(0, 0, 0.58, 1)。它表示插值开始突然，然后逐渐减速到结束。

ease-in-out：此关键字表示缓动函数cubic-bezier(0.42, 0, 0.58, 1)。它表示插值开始缓慢，加速，然后在结束时减速。在开始时，它的行为类似于ease-in关键字；在结束时，它类似于ease-out关键字。

cubic-bezier()：此函数接受四个<number>值来塑造曲线。

• <number>：指定P1 和 P2 点在曲线上的位置。<x1> 和 <y1> 是点 P1 的坐标，<x2> 和 <y2> 是点 P2 的坐标。<x1> 和 <x2> 值必须在 0 和 1 之间，否则函数将无法按预期工作。

<step-easing-function>

指定一个steps()函数，该函数将动画划分为一定数量的等长间隔或“步长”，导致动画从一个步长跳到下一个步长，而不是平滑过渡。此参数接受以下两个映射到预定义steps()函数或自定义steps()函数的关键字值之一

step-start：此关键字表示缓动函数steps(1, jump-start) 或 steps(1, start)。它表示插值立即跳转到其最终状态，并在那里保持到结束。

step-end：此关键字表示缓动函数steps(1, jump-end) 或 steps(1, end)。它表示插值保持其初始状态直到结束，此时它直接跳转到其最终状态。

steps()：此函数接受一个正<integer>和一个可选的<step-position>。

• <integer>：表示等距间隔或“步长”的数量。它必须是大于0的正整数，除非第二个参数是jump-none，在这种情况下，它必须是大于1的正整数。
• <step-position>：指定跳转的时机发生在开始、结束、开始和结束或都不发生。可能的关键字值包括
  • jump-start 表示第一个跳转发生在开始时，基本上是在0点。在0%标记处没有花费时间。
  • jump-end 表示最后一个跳转发生在结束时，基本上是在1点。在100%标记处没有花费时间。当未指定<step-position>时，这是默认值。
  • jump-none 表示在开始或结束时都不会发生跳转，有效地删除了持续时间内的步长。相反，进度在0%标记和100%标记处保持稳定。这些保持的持续时间由总持续时间除以步长数 (1/n) 确定。
  • jump-both 表示跳转发生在开始和结束时，基本上发生在0和1处。有效地，在两端都添加了一个步长。在0%和100%标记处没有花费时间。
  • start 等效于 jump-start。
  • end 等效于 jump-end。

缓动函数有三种类型

• 线性
• 三次贝塞尔曲线
• 步长

linear()函数创建一个分段线性缓动，允许通过在指定的点之间线性插值来近似复杂的动画和过渡。插值以恒定的速率从开始到结束发生。linear()函数的典型用法是提供许多点来近似任何曲线。

例如，linear(0, 0.25, 1)函数以0、0.25和1作为参数具有线性停止。动画或过渡从点0开始，线性移动到0.25，然后继续线性移动到点1。由于没有指定<linear-stop-length>百分比，因此使用相同的持续时间 (50%) 从0到0.25以及从0.25到1。

默认情况下，停止点是等距的。因此，如果有 5 个停止点，它们将位于持续时间的 0%、25%、50%、75% 和 100%。您可以使用可选的<linear-stop-length>百分比值提供更精细的控制，定义每个段的开始和/或长度，从而实现更受控的过渡进程。

考虑一个持续时间为 100 秒、变化为 100 像素的动画。让我们看一个指定动画缓动的示例：linear(0, 0.25 75%, 1)。在这种情况下，动画在最初的 75 秒（持续时间的 75%）内推进到 25 像素（其总变化的 25%）。剩下的 75 像素在动画剩余的 25 秒内应用。对于相同的动画，假设缓动函数改为给出为linear(0, 0.5 25% 75%, 1)。在这里，动画在 25 秒（持续时间的 25%）内达到 50 像素（其总变化的 50%），并在那里保持 50 秒（持续时间的 75% - 25%）。然后在剩余的 25 秒持续时间内应用最后的 50 像素。请注意，linear(0, 0.5 25% 75%, 1)等效于linear(0, 0.5 25%, 0.5 75%, 1)。

cubic-bezier()函数表示法定义了一个三次贝塞尔曲线。三次贝塞尔曲线缓动函数子集中的缓动函数通常称为“平滑”缓动函数，因为它们可用于平滑插值的开始和结束。它们将输入进度关联到输出进度，两者都表示为<number>。对于这些值，0.0表示初始状态，1.0表示最终状态。

三次贝塞尔曲线由四个点定义：P0、P1、P2 和 P3。点 P0 和 P3 分别表示曲线的开始和结束。在 CSS 中，这些点被固定为坐标进度（横坐标为输入进度，纵坐标为输出进度）。P0 为(0, 0)，表示初始进度和初始状态。P3 为(1, 1)，表示最终进度和最终状态。

并非所有三次贝塞尔曲线都适合用作缓动函数，因为并非所有曲线都是数学函数；即，对于给定的横坐标具有零个或一个值的曲线。通过 CSS 定义的固定 P0 和 P3，三次贝塞尔曲线是一个函数，因此是有效的，当且仅当 P1 和 P2 的横坐标都在[0, 1]范围内。

P1 或 P2 纵坐标超出[0, 1]范围的三次贝塞尔曲线会导致值超出最终状态，然后返回。在动画中，对于某些属性，例如left或right，这会产生一种“弹跳”效果。

但是，某些属性会在其超出允许范围时限制输出。例如，rgb()中大于255或小于0的颜色分量将被剪裁到最接近的允许值（分别为255和0）。一些cubic-bezier()值表现出此属性。

当您指定无效的三次贝塞尔曲线时，CSS 会忽略整个属性。

关键字ease、ease-in、ease-out和ease-in-out等效于特定的cubic-bezier()值。

steps()函数表示法定义了一个阶跃函数，该函数将输出值的域划分为等距的步长。此阶跃函数子类有时也称为阶梯函数。

以下是一些说明steps()函数的示例

steps(2, jump-start) /* Or steps(2, start) */
steps(4, jump-end) /* Or steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)

关键字step-start和step-end等效于特定的steps()值。

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}  

此示例使用动画轻松比较不同的缓动函数。您可以从下拉菜单中选择一个缓动函数——有几个关键字和一些cubic-bezier()和steps()选项。选择一个选项后，您可以使用提供的按钮启动和停止动画。

HTML

<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">Start animation</button>
  </li>
  <li>
    <label for="easing-select">Choose an easing function:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>

CSS

body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgb(25 255 255 / 80%),
    rgb(25 255 255 / 40%)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

JavaScript

const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "Start animation") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "Stop animation";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "Start animation";
  }
});

selectElem.addEventListener("change", () => {
  divElem.style.animationTimingFunction = selectElem.value;
});

结果

这些三次贝塞尔曲线在 CSS 中有效

/* The canonical Bézier curve with four <number> in the [0,1] range */
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/* Using <integer> is valid because any <integer> is also a <number>. */
cubic-bezier(0, 0, 1, 1)

/* Negative values for ordinates are valid, leading to bouncing effects. */
cubic-bezier(0.1, -0.6, 0.2, 0)

/* Values greater than 1.0 for ordinates are also valid. */
cubic-bezier(0, 1.1, 0.8, 4)

这些三次贝塞尔曲线定义无效

/* Though the animated output type may be a color,
   Bézier curves work with numerical ratios. */
cubic-bezier(0.1, red, 1.0, green)

/* Abscissas must be in the [0, 1] range or
   the curve is not a function of time. */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* The two points must be defined, there is no default value. */
cubic-bezier(0.3, 2.1)

/* Abscissas must be in the [0, 1] range or
   the curve is not a function of time. */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

这些缓动函数有效

/* There are 5 treads, the last one happens
   right before the end of the animation. */
steps(5, end)

/* A two-step staircase, the first one happening
   at the start of the animation. */
steps(2, start)

/* The second parameter is optional. */
steps(2)

这些缓动函数无效

/* The first parameter must be an <integer> and
   cannot be a real value, even if it is equal to one. */
steps(2.0, jump-end)

/* The amount of steps must be non-negative. */
steps(-3, start)

/* There must be at least one step. */
steps(0, jump-none)

• CSS 动画
• CSS 过渡
• 三次贝塞尔曲线
• linear()缓动生成器