1. 引言
本节不是规范性的。
通常希望控制某些值变化的速率。例如，逐渐增加元素移动的速度可以使元素在获得动量时呈现出重量感。这可以用于产生直观的用户界面元素或表现得像其物理对应物的逼真动画道具。或者，有时希望动画以明显的步骤向前移动，例如一个分段的轮子旋转，使得各段始终出现在相同的位置。
同样，控制梯度插值的变化速率可以用于产生不同的视觉效果，例如暗示一个凹面或凸面，或产生条纹效果。
缓动函数 提供了一种通过接受输入进度值并产生相应转换输出进度值来转换这些值的方法。
给定输入进度为0.7，缓动函数将值缩放以产生输出进度0.52。
将此缓动函数应用于动画将导致其最初进展较慢，但随后逐渐加快。
1.1. 值定义
本规范使用值定义语法，来自[CSS-VALUES-3]。未在本规范中定义的值类型在 CSS 值与单位[CSS-VALUES-3]中定义。与其他 CSS 模块结合可能会扩展这些值类型的定义。
2. 缓动函数
一个缓动函数必须是一个纯函数，这意味着对于给定的一组输入，它总是产生相同的输出进度值。
输入进度值input progress value是一个在范围[-∞, ∞]内的实数。通常，输入进度值在范围[0, 1]内，但在缓动函数被串联在一起时，可能不是这种情况。
缓动函数串联在一起的一个示例发生在Web Animations [WEB-ANIMATIONS]中，其中指定的动画效果的缓动函数输出可能成为某个关键帧效果的缓动函数的输入。在这种情况下，关键帧效果上的缓动函数的输入可能超出范围[0, 1]。
输出进度值output progress value是一个在范围[-∞, ∞]内的实数。
某些类型的缓动函数还接受一个附加的布尔before flag输入，该输入稍后定义。
本规范定义了四种类型的缓动函数，其定义如下。
指定缓动函数的语法如下：
2.1. 线性缓动函数：linear
线性缓动函数linear easing function是一个恒等函数，这意味着它的输出进度值对于所有输入都等于输入进度值。
线性缓动函数linear easing function的语法仅是linear关键字。
2.2. 立方 贝塞尔缓动函数： ease, ease-in, ease-out, ease-in-out, cubic-bezier()
一种立方贝塞尔 缓动函数是 一种缓动函数 ，由四个实数定义，这些实数指定了立方贝塞尔曲线的两个控制点P1和P2， 其端点P0和P3固定在(0, 0)和(1, 1)处。 P1和P2的x坐标限制在[0, 1]范围内。
曲线的形状由控制点P1和P2的位置决定。
输入进度值作为曲线的x值，而y值则是输出进度值。
一种立方 贝塞尔缓动函数具有以下语法 （使用[CSS-VALUES-3]中的符号）：
每个值的含义如下：
- ease
-
等价于cubic-bezier(0.25, 0.1, 0.25, 1)。
- 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)。
-
- cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
-
指定一种立方贝塞尔缓动函数。 四个数字指定曲线的点P1和P2，表示为（x1, y1, x2, y2）。
上述关键字值的效果如下所示。
2.2.1. 立方贝塞尔缓动函数的输出
输入进度到输出进度的映射是通过确定给定 x 值（输出进度值）对应的 y 值来完成的（输入进度值）。这个曲线的评估在许多来源中都有覆盖，如 [FUND-COMP-GRAPHICS]。
对于范围外的 输入进度值 [0, 1]，曲线将无限延伸，使用最近端点的切线如下：
2.3. 阶跃缓动函数： step-start, step-end, steps()
阶跃缓动函数是一种缓动函数，将输入时间分成指定数量的相等长度的区间。它由若干个步骤和一个步骤位置定义。其语法如下：
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
每个值的含义如下：
- step-start
-
计算为 steps(1, start)
- step-end
-
计算为 steps(1, end)
示例阶跃缓动函数关键字值。 - steps(<integer>[, <step-position> ]?)
-
第一个参数指定函数中的区间数量。它必须是一个大于0的正整数，除非第二个参数为jump-none，在这种情况下，它必须是一个大于1的正整数。
第二个参数（可选）使用以下值指定步骤位置：
- jump-start
-
第一次上升发生在输入进度值为0时。
- jump-end
-
最后一次上升发生在输入进度值为1时。
- jump-none
-
所有上升发生在范围 (0, 1) 内。
- jump-both
-
第一次上升发生在输入进度值为0时，最后一次上升发生在输入进度值为1时。
- start
-
表现为jump-start。
- end
-
表现为jump-end。
如果省略第二个参数，则假定值为end。
这些值在下方示例中有所说明：
示例阶跃缓动函数。
2.3.1. 阶跃缓动函数的输出
在阶跃发生的确切点，函数的结果概念上是阶跃的顶部。然而，作为输入传递给阶跃缓动函数的附加前标志如果为真，将导致函数的结果对应于阶跃点的底部。
作为前标志如何影响此函数行为的示例， 考虑一个具有阶跃缓动函数的动画，其阶跃位置为开始并具有正延迟和向后填充。
例如，使用CSS动画：
animation : moveRight5 s 1 s steps ( 5 , start);
在延迟阶段，输入进度值将为零，但如果前标志被设置以指示动画尚未到达其 动画区间，则缓动函数将产生零作为其输出进度值，即第一步的底部。
在计算输出进度值时，阶跃位置 开始被视为等同于跳跃开始。 同样结束被视为等同于跳跃结束。 因此，以下算法未明确提及开始或结束。
注意：用户代理仍然必须区分跳跃开始和开始以便进行序列化（见§ 2.4 序列化）。
-
如果阶跃位置 属性为以下之一：
将当前步骤增加1。
-
如果两个以下条件均为真：
将当前步骤减少1。
-
如果输入进度值 ≥ 0 且 当前步骤 < 0， 让当前步骤为零。
-
根据阶跃位置计算跳跃如下：
-
如果输入进度值 ≤ 1 且 当前步骤 > 跳跃，则让当前步骤等于跳跃。
-
输出进度值为
当前步骤 / 跳跃。
2.4. 序列化
缓动函数使用[CSSOM]中定义的通用序列化模式进行序列化，并附加以下要求：
-
关键字值ease、linear、ease-in、ease-out和ease-in-out将被原样序列化， 也就是说，它们不会在序列化之前转换为等效的cubic-bezier()函数。
-
无论是通过steps()函数指定的阶跃缓动函数，还是使用step-start或step-end关键字，序列化如下：
-
如果阶跃位置为jump-end或end， 则序列化为steps(<integer>)。
-
3. 隐私和安全考虑
本规范并未直接向Web平台引入任何新功能，而是提供了可供其他规范引用的共同定义。 因此，它并未引入任何新的隐私和安全问题。
引用本规范中定义的特性的规范应考虑到，尽管缓动函数通常接受范围为[0,1]的输入进度值， 并产生范围为[0, 1]的输出进度值， 但情况并不总是如此。 应用缓动函数时，应定义输入和输出超出该范围时的行为， 以确保不会引入新的安全考虑。
4. 变更
自2019年4月30日候选推荐版本以来，已进行以下更改：
-
更新了cubic-bezier()语法 定义，以使用CSS括号范围符号注释范围限制。（编纂）
-
添加了缓动函数链式调用的示例。（编纂）
5. 致谢
本规范基于CSS过渡规范， 编辑者为L. David Baron、Dean Jackson、David Hyatt和Chris Marrin。 编辑者还要感谢Douglas Stockwell、Steve Block、Tab Atkins、Rachel Nabors、Martin Pitt，以及Animation at Work Slack社区的反馈和贡献。