动画的缓动（或时序函数）决定了它随着时间推移的方式。

例如，线性缓动意味着动画在整个持续时间内以相同的速度运行。这意味着如果一个元素一开始没有移动，然后开始移动，它将立即开始，就好像它甚至不需要加速一样。通常，Web 开发者会选择其他看起来更自然、更逼真的缓动效果。有一些内置的缓动效果，例如 ease、ease-in、ease-out 和 ease-in-out，甚至可以使用 cubic-bezier() 函数 创建自己的缓动效果。

值得注意的是，Firefox 中的 检查器面板 已经允许您 在 CSS 规则视图中编辑动画缓动.

从 Firefox 52 开始，动画检查器面板 现在直接在其时间线内显示动画缓动。

这对一目了然地了解有关动画的更多信息非常有用。

当您将鼠标悬停在动画上时，还会出现一个方便的工具提示。它包含您可能需要的有关给定动画的所有时序信息：包括它的缓动效果，以及持续时间、迭代次数、延迟、方向等。

以下是缓动在时间线中如何表示的几个示例：

• 重复 3 次，缓动效果为 ease-in-out 的动画
  
• 无限循环动画，缓动效果为线性
  
• 重复 5 次，方向交替，缓动效果为 ease，填充模式为 forwards 的动画
  

以下是一个视频，展示了动画检查器面板中几种缓动类型的效果：

关于延迟

您可以使用两种类型的延迟在动画中使用：延迟和结束延迟。

后者只能与使用 Web 动画 API 创建的动画一起使用。结束延迟对于同步多个动画很有用，例如，当您希望一个动画在第一个动画结束后的 1 秒后精确开始时。

延迟和结束延迟都可以是正数或负数。

动画检查器现在还以视觉方式表示这些延迟。以下是一些示例：

• 正延迟
  
• 正结束延迟
  
• 负延迟
  
• 负结束延迟
  

效果缓动与关键帧缓动

有两种方法可以将缓动应用于动画：要么在整个动画迭代中应用，对所有属性都产生相同的影响（效果缓动），要么在 关键帧 之间应用，并且仅影响在这些关键帧上指定的属性（关键帧缓动）。

CSS 动画只允许使用关键帧缓动，这会让很多人感到困惑。几乎每个人都认为 animation-timing-function 是效果缓动，但实际上它是关键帧缓动。但是，使用 Web 动画 API 创建的动画可以使用两种类型的缓动。

目前，动画检查器只显示效果缓动。这意味着，即使您定义了一个具有非线性 animation-timing-function 的 CSS 动画，时间线也会显示线性进度。

Bug 1309468 将解决这个问题，并在动画检查器中使关键帧缓动可见。我们欢迎您在下面的评论区中提出您的想法和建设性的反馈，或在 Twitter 上发推给 @FirefoxDevTools。