用 Chrome DevTools 检查和调整 CSS 动画-未完纪

原文：Animations: Inspect and modify CSS animation effects。作者：Kayce Basques、Sofia Emelianova；来源：Chrome for Developers / Chrome DevTools 官方文档。本文为获授权的中文翻译整理，译编：未完纪。

动画只需几百毫秒就会结束，靠肉眼反复触发，往往难以判断是哪一段延迟、哪一个关键帧或哪个元素没有按预期工作。Chrome DevTools 的 Animations 抽屉面板会捕获动画并把相关动画分组，让你减慢速度、回放、拖动时间线，还可以直接调整时长与时序。

本文按源页完整整理操作流程。核对日期为 2026 年 10 月 5 日，源页标注的最后更新日期为 2024 年 4 月 16 日（UTC）。不同 Chrome 版本的菜单、图标或伪元素展示可能变化；以下文字及原图描述的是该文档中的界面，不是本次运行验证的截图。

面板能检查什么

打开 Animations 面板后，它会自动检测正在发生的动画，并整理成动画组。它主要完成两类工作：

检查动画：减速、回放，并定位动画组对应的源代码。
修改动画：调整动画组内动画的时序、延迟、时长和关键帧偏移位置。

这里的“修改关键帧偏移”是调整关键帧发生的时间点，并不表示 Animations 面板可以编辑关键帧内部的样式值或贝塞尔曲线。缓动的时序和自定义贝塞尔曲线应在 Elements > Styles 中使用 Easing Editor 调整；关键帧样式也应回到 Styles 中编辑。

源文列明支持 CSS Animations、CSS Transitions、Web Animations，以及 View Transitions API；requestAnimationFrame 驱动的动画尚不在该面板的支持范围内。因而面板中没有出现某段动画，不能直接推断动画没有执行。

“动画组”是怎么形成的

动画组是一组看起来彼此相关的动画。开发者通常分别定义多个元素的运动，再安排它们的起始时刻，使其形成一个连贯的视觉效果；网页本身并没有与此面板完全对应的分组概念。

Animations 面板根据动画的开始时间推测关联关系，分组时不把延迟计算在内。一般来说，在同一个脚本块中触发的动画会归入一组；如果它们通过异步过程触发，则可能分到不同组。这个分组反映的是工具的推断，不是你在业务代码里声明的组件边界。

打开面板并捕获动画

有两种打开方式：

在 DevTools 的 Customize and control DevTools 菜单中，选择 More tools > Animations。
打开 Command Menu：macOS 使用 Command + Shift + P；Windows、Linux 和 ChromeOS 使用 Control + Shift + P。输入 Show Animations，选择对应的抽屉面板。

默认情况下，Animations 会作为标签出现在 Console 所在的抽屉中。因此你可以一边保留其他主面板，一边查看动画，也可以把它移动到 DevTools 上方作为主面板使用。

打开时，面板会捕获当时正在运行的动画。对于页面加载时就执行、现在已经结束的动画，应保持面板打开后重新加载页面。对于点击、悬停或其他操作触发的动画，则在面板已经打开后再触发一次。

理解四个界面区域

图 1：Animations 面板的四个区域。原图来自 Chrome for Developers，Kayce Basques、Sofia Emelianova 文档配图，CC BY 4.0；原始图像未裁切或改动。图中界面属于原文示例，不代表本次测试环境。

Controls（控制栏）：清空所有已捕获动画组、暂停或恢复动画，以及修改所选动画组的预览速度。
Overview（概览）：显示捕获到的动画组。滚动驱动的动画和常规时间驱动的动画用不同图标区分。在这里选中一组，下方详情区就会显示它。
Timeline（时间线）：滚动驱动动画以像素为刻度，时间驱动动画以毫秒为刻度。可以回放动画、拖动播放头或跳到某个位置。
Details（详情）：检查并调整所选动画组中的具体动画。

回放、减速与逐帧观察

捕获动画后，可以把鼠标悬停在概览区的缩略图上观看预览；也可以选中动画组，点击 Replay，让动画在页面视口中重新播放。控制栏中的速度按钮用于降低或恢复所选动画组的预览速度，适合观察快速变化的中间状态。

时间线上的红色竖线是播放头。拖动它可以来回查看页面中的动画状态；点击时间线任意位置，可以把播放头移到该处。动画此前正在播放时，跳转后会继续播放；此前已经暂停时，则继续保持暂停。这一区别很有用：要比较某个固定时刻的多个元素，先暂停再拖动更容易观察。

读懂动画详情

详情区内，每个动画占一行。元素名称显示不全时，可以调整名称列的宽度。把鼠标移到某一行动画上，对应元素会在页面视口中高亮；点击它，会在 Elements 面板中选中相关元素，便于继续检查 DOM 和样式。

如果动画的 animation-iteration-count 为 infinite，动画会无限重复。面板同时展示它的定义与后续迭代：最左侧较深的一段是动画定义，右侧较浅的各段表示重复播放。原文举例中的第二段、第三段，都是第一段的后续迭代，不是独立定义的三个动画。

两个元素应用相同动画时，面板会用相同颜色标识它们。例如原文示例中，div.eye.left::after 与 div.eye.right::after 使用同一个 eyes 动画；div.feet::before 与 div.feet::after 也成对共享动画。颜色本身是随机的，没有“红色更慢”之类的额外含义。

直接修改时长、关键帧时刻和延迟

Animations 面板支持三类拖动操作：

改变时长：拖动动画条开头或结尾的圆点。
改变关键帧时间点：如果动画定义了中间关键帧，它们会显示为动画条内部的白色圆点；拖动白色圆点即可调整该关键帧的时序。
增加或调整开始延迟：按住动画条本身并拖动，注意不要抓住圆点。

这些修改会作用到对应元素的行内样式，因此可以立即看到结果，也能马上回放比较。编辑说明：这是调试状态中的修改；把调好的参数写回项目源码并保存，是另一个步骤。不要仅因为浏览器中的预览正确，就认为构建产物或远端页面已经更新。

在 Styles 中实时修改 @keyframes

除了在动画条上拖动时间点，你也可以直接编辑 Elements > Styles 中的 @keyframes。Animations 面板会立即反映变化。原文使用一个持续脉动的示例说明流程：

打开 Animations 面板，让它自动捕获页面中正在运行的 pulse 动画，然后选中该动画。
在 Elements 中检查 class="pulser" 的元素；在 Styles 中找到 @keyframes pulse。
尝试把第二个关键帧的位置从 50% 改成 20%。
观察 Styles 中的变化怎样影响 Animations 面板捕获的动画，再通过回放比较结果。

这个例子调整的是关键帧发生的相对时刻。要改关键帧里的 CSS 属性值，同样应在 Styles 中编辑相应规则；要调整缓动曲线，则使用前面提到的 Easing Editor。原文附有交互演示入口，可从原文“Edit @keyframes live”一节进入。

暂停 View Transition，检查临时伪元素

View Transitions API 允许页面一次性更新 DOM，同时在更新前后的两个状态之间生成过渡动画。动画期间，浏览器会构造如下伪元素树：

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

这些结构只在过渡期间出现，因此先暂停再触发，比等动画跑完后寻找它们更直接。原文步骤如下：

打开 DevTools，检查一个使用 View Transitions API 的页面。原文提供了对应演示页面。
在 Animations 中点击 Pause。
回到页面触发过渡动画。面板会捕获并立即暂停，此时可以在 Elements 的 DOM 视图中、<head> 元素上方找到 ::view-transition 结构。
在 Elements > Styles 中修改这些伪元素的 CSS。
恢复动画，并用 Replay 检查修改后的效果。

更完整的 API 背景可参见原文链接的 View Transitions 文档。本文只覆盖动画检查与调试流程，不把面板截图中的运行状态当作性能测试，也不推定所有 JavaScript 动画都可被捕获。

核验说明：本次已核对源文全文、原始配图和伪元素结构；没有启动浏览器动画演示或执行外部页面脚本。正文无可执行脚本，代码块仅展示树形结构。调试面板修改的是当前页面样式，未涉及网络凭据或生产部署；没有发现问题不等于对被调试页面完成了安全审计。

许可与归属：除另有说明，原文内容依据 Creative Commons Attribution 4.0（CC BY 4.0），代码示例依据 Apache License 2.0。作者为 Kayce Basques、Sofia Emelianova，来源为 Chrome for Developers。本文进行了中文翻译、段落整理，并补充版本和未执行测试说明；本文译文按 CC BY 4.0 提供，原配图未修改。Java 是 Oracle 和/或其关联公司的注册商标。

文章版权归作者所有，未经允许请勿转载。

THE END