“这是我参与更文挑战的第24天，活动详情查看： 更文挑战”

本文翻译自 timing-function，原文链接： tympanus.net/codrops/css… 致谢

CSS 中的 <timing-function> 是一个（数学）函数，它指定被动画化或从一个值转换到另一个值的物体随着时间的推移的速度。 它描述了过渡或动画将如何在其持续时间的一个周期内进行。

例如，如果您要将一个对象从 A 点移动到 B 点，您可以让它在 2 秒的过程中以线性“稳定”速度移动，或者您可以让它从 A 点快速启动直到 它到达一半，然后逐渐减速，直到到达 B 点。这就像想象自己开车从家里开车去上班一样（当然，假设您不在家工作）。 假设到达那里需要 30 分钟； 您可以以恒定速度行驶，也可以在知道还有很多时间的情况下慢慢开始，然后在 20 分钟后加快速度以确保准时到达。

CSS 动画和过渡中的这种速度变化（加速或减速）通常由描述一段时间内速度的计时函数定义。 当一些动画师通常谈论动画的“感觉”、“物理”或“流畅”时，他们可能指的是选择特定的计时函数来控制随时间变化的运动速度。

CSS 中的计时函数通常是 transition-timing-function 属性和 animation-timing-function 属性的值。 它用于定义一个函数，该函数描述 transition 将如何在其持续时间内进行，允许 transition 在其过程中改变速度。

CSS 中的计时函数描述了如何计算过渡期间的中间值，在 CSS 中通常称为 easing functions.。

定义计时函数

可以通过以下三种方式之一定义计时函数：使用预定义的关键字、使用步进函数或使用三次贝塞尔函数。 官方语法如下：

<timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
复制代码

steps() 计时函数

步进函数是由一个数字定义的计时函数，该数字将转换的持续时间划分为大小相等的间隔。 该函数还指定输出百分比的变化是发生在间隔的开始还是结束。 步进函数的这个子类有时也称为阶梯函数。

该函数的语法如下：

steps(<integer>[, [ start | end ] ]?)
复制代码

该函数采用一个或两个参数，用逗号分隔：一个正整数，指定函数中的区间数，以及一个可选值 start 或 end，指定区间内值发生变化的点 . 如果不包含第二个参数，则默认为结束。

steps() 函数示例的可视化表示如下：

解释此功能的最佳方法是使用一些现场示例。

在下面的两个例子中，steps() 函数的第一个参数设置为6，这意味着过渡的时间将分为6个区间，过渡将发生在6个区间，即6步。

我们在这里使用 CSS transition 属性来定义过渡。 当您将鼠标悬停在主容器上时会触发转换。 整个运动发生在 3 秒的过程中，如转换声明中指定的那样。 因此，每个间隔将是 3/6 = 0.5 秒长。

现在，根据函数的第二个参数的值，位置的变化将发生在每个（6 个）间隔的开头或结尾。

在第一个例子中，steps() 函数的第二个参数设置为 start ； 当转换被触发时，该值立即开始改变。 所以，在 time = 0s，第一个间隔的开始，值的第一次变化发生，框立即向右移动 100px。

而在第二个示例中，值的第一次变化（位置）发生在第一个间隔的末尾，即 time = 0.5 秒，框向右移动 100 像素。 您可以从第二个动画中的初始“滞后”中注意到这一点。

备注：因为掘金不好嵌入 iframe 预览效果，只能通过外部链接形式体现。

预览效果见：steps 预览效果

其工作方式是：根据函数中指定的数量，将元素的运动或过渡分为 n 步。 然后，您将动画的持续时间拆分为 n 个间隔，然后根据函数的第二个参数的值开始沿间隔执行运动步骤。

例如，在上面的演示中，第一个框将在 t = 0s 开始更改其值，这是第一个间隔的开始； 所以在 t = 0s 时，盒子将它的第一个 100px 向右移动（100px = 600px / n）。 然后，在第二个间隔开始时，在 t = 0.5 秒时，框将其第二步再移动 100 像素。 它继续重复相同的步骤，直到到达最后一个间隔的开始，在 t = 2.5 秒，在那里它移动最后 100 像素并保持在那里，因为在 t = 3 秒，运动的持续时间结束，所以你不再可以开始一个新的间隔，此后没有额外的步骤可被执行。

第一个演示中采取的步骤的可视化表示。 蓝线代表六个区间。 线条开头的点是每个间隔开始的时间点。

在第二个演示中，盒子将在 t = 0.5 秒开始其 6 次移动中的第一次，这表示第一个间隔的结束（请记住，第二个参数设置为结束）。 然后它在 t = 1s 进行第二次移动，这是第二个间隔的结束。 它一直这样做，直到它在 t = 3s 到达第六个间隔的末尾，在那里它执行最后一步并且动画结束。

第二个演示中采取的步骤的可视化表示。 蓝线代表六个区间。 线条末尾的点是每个间隔开始的时间点。

备注：原图有错误，被我用红色给改正了

绘制一个简单的图形总是一个好主意，将其拆分为您在 steps() 函数中指定的多个间隔，以预测动画将如何执行。 它还有助于调试许多起初可能看起来错误的动画。

steps() 函数也可以用来创建一些非常酷的图像精灵动画。

参阅 css steps 函数实现图像精灵动画

cube-bezier() 计时函数

cube-bezier() 函数指定三次贝塞尔曲线。

您可以定义自己的计时函数并通过定义自定义三次贝塞尔曲线来创建自定义缓动效果甚至弹跳效果。

如果您熟悉矢量绘图软件，那么您已经看到了三次贝塞尔曲线。 三次贝塞尔曲线由四个控制点 P0 到 P3 定义（见下图）。

由四个控制点定义的三次贝塞尔曲线的可视化表示

给定直线的起点 (P0) 和终点 (P3)，贝塞尔曲线为每个端点（P1 和 P2）定义了两个控制点。 P0 和 P3 始终相对设置为 (0,0) 和 (1,1)。 起点和终点的 x 坐标必须始终介于 0 和 1 之间。 0 和 1 表示动画或过渡的起点和终点，因此任何小于 0 或大于 1 的值都将超出运动的时间边界，因此无效。

如何在两点之间创建三次贝塞尔曲线。 来源

因此，将定义过渡或动画的“感觉”或“流动”的贝塞尔曲线由四个点定义。 其中两点是固定的，因此您不必担心它们。 剩下两个控制点：P1 和 P2，您需要指定它们来定义曲线，这两个点由 X 和 Y 坐标指定（就像坐标系中的任何点一样）。

两个点的 X 值也必须在 [0, 1] 范围内。 另一方面，Y 值可以超出此范围。

cube-bezier() 函数有四个参数：

cubic-bezier(<number>, <number>, <number>, <number>)
复制代码

四个 <number> 参数将曲线的两个控制点 P1 和 P2 指定为 (x1, y1, x2, y2)。

如果您不是数学高手，也没有使用图形软件的经验，也不知道如何定义这两个控制点，此时您可能会问自己：如何指定两个控制点以获得我想要的缓动效果？ 这里有 3 个很棒的工具，可以帮助创建自定义缓动值：

• Lea Verou 的三次贝塞尔曲线
• 由 Rob La Placa 编写的 CSS 立方贝塞尔生成器
• 马修·莱恩 (Matthew Lein)的工具

所有这些工具都提供拖放功能来移动控制点以获得您想要的曲线形状。

在下面的演示中，我们使用 Lea Verou 的三次贝塞尔工具来生成cubic-bezier() 函数。

在第一个示例中，我们将其中一个控制点的 Y 坐标设置为大于 1，从而产生弹跳效果。

预览效果见：cubic-bezier 预览效果

您可以使用 Lea 的工具并生成和预览大量 Bézier 曲线示例。

还有一个不错的 easing function cheat sheet 可用，它允许您预览许多自定义三次贝塞尔曲线效果，非常赞。

预定义关键字

除了能够定义自己的 Bézier 曲线和计时函数之外，CSS 还附带了一些受支持的关键字，定义了一些常见的缓动函数，它们相当于使用cubic-bezier() 或 steps() 函数定义的特定计时函数。

ease

ease 函数等价于cubic-bezier(0.25, 0.1, 0.25, 1)。 这是 CSS 中的默认计时函数。 因此，如果在 transition-timing-function 属性或 animation-timing-function 属性中没有指定计时函数，则easie 是设置的值。

linear

线性函数等价于cubic-bezier(0, 0, 1, 1)。 使用线性计时功能，速度从开始到结束都将保持稳定。

ease-in

缓入 ease-in 函数等效于cubic-bezier(0.42, 0, 1, 1)。 使用此计时功能，动画将缓慢开始，然后获得更大的加速度并保持稳定，直到持续时间结束。

ease-out

缓出 ease-out 函数等价于cubic-bezier(0, 0, 0.58, 1)。 使用此计时功能，动画将快速开始，然后减速并保持稳定，直到持续时间结束。

ease-in-out

缓入缓出函数等价于cubic-bezier(0.42, 0, 0.58, 1)。 它是缓入和缓出的结合。 动画或过渡将开始缓慢，在中间加速，然后减速直到结束。

step-start

step-start 函数相当于steps(1, start)。 使用此计时功能，动画或过渡将突然更改为结束状态并保持在该位置直到动画结束。

step-end

step-end 函数等价于 steps(1, end)。 使用此计时功能，动画或过渡将保持其初始状态直到结束，然后直接跳转到其最终位置。

你可以尝试以下预览效果：

预览效果见：预定义关键字

更多的阅读

• CSS Transitions()
• CSS Animations
• Understanding CSS Timing Functions

关联资源

• transition-timing-function
• animation-timing-function