linear()

语法

linear(0, 1)
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)
linear(0, 0.5 25% 75%, 1)

参数

该函数接受两个或多个以下值，这些值代表动画时间轴上的进度点。

<number>

表示动画或过渡持续时间中的一个时间点。必须至少指定两个值。值 0 表示过渡的开始，1 表示结束。也允许使用 0 到 1 范围之外的值。

<percentage> 可选

表示动画时间轴中何时达到进度 <number>。它可以在除了第一个和最后一个以外的任何 <number> 值之后指定，并且最多可以有两个值。如果指定了两个百分比值，它们定义了停止的长度：第一个百分比表示该段动画或过渡的起点，第二个百分比表示终点。如果没有指定 <percentage> 值，则进度值会沿时间轴均匀分布。

描述

linear() 函数允许通过在指定点之间进行线性插值来近似复杂的动画和过渡。linear() 函数的典型用途是提供许多点来近似任何曲线。

linear() 函数创建的过渡在指定点之间以恒定速率进行。例如，linear(0, 0.25, 1) 有 0、0.25 和 1 的线性停止点。动画从点 0 开始，线性移动到 0.25，然后继续线性移动到点 1。由于没有指定百分比，每个段（即从 0 到 0.25 以及从 0.25 到 1）都使用相同的持续时间（50%）。

默认情况下，停止点是等距的。例如，如果有五个停止点，它们将分别发生在持续时间的 0%、25%、50%、75% 和 100%。你可以使用可选的百分比值来提供更精细的控制，定义每个进度值何时发生，从而实现更受控的过渡进度。

考虑一个持续时间为 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%）。然后剩余的 50 像素在持续时间的最后 25 秒内应用。请注意，linear(0, 0.5 25% 75%, 1) 等同于 linear(0, 0.5 25%, 0.5 75%, 1)。

正式语法

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

示例

使用 linear() 函数

以下 linear() 函数可在 CSS 中有效使用：

/* Three evenly distributed progress points */
linear(0, 0.25, 1)

/* Custom timing with percentage values */
linear(0, 0.5 25% 75%, 1)

以下 linear() 定义无效：

/* At least two parameters are required */
linear(0.5)

/* Percentages must be in ascending order */
linear(0, 0.25 80%, 0.5 60%, 1)

/* Values must be numbers */
linear(start, middle, end)

规范

浏览器兼容性

另见

• 其他缓动函数：cubic-bezier() 和 steps()
• CSS 缓动函数模块
• Jake Archibald 的 linear() 缓动生成器