动画与过渡调试器

Chrome DevTools → 更多工具 → 动画（或 Cmd+Shift+P → “动画”）。该面板会记录运行中的 CSS 过渡和动画，并在时间线上显示它们，同时提供拖动查看和播放速度控制。

动画面板提供 10%、25% 和 100% 的播放速度。将速度降至 10% 后，可以发现全速播放时看不见的计时问题、缓动曲线问题和卡顿，这对调试复杂的多元素动画编排至关重要。

每个记录的动画都会显示为一行，其中包含项目名称、持续时间条、延迟偏移量和迭代次数。关键帧菱形标记会显示计时函数的变化。将鼠标悬停在某一行上时，视口中的对应项目会高亮显示。

在动画面板中将播放头拖动到动画时间线上的任意位置。页面会精确渲染对应帧，因此您可以在任意时刻冻结动画，同时在计算值面板中检查项目位置、不透明度和变换值。

点击动画行将其展开。单个关键帧会以菱形标记显示在时间线上。点击关键帧菱形标记，可以跳转到样式面板中对应的 @keyframes 规则，并通过实时预览进行编辑。

Chrome DevTools 会显示每个动画片段的三次贝塞尔曲线。点击样式面板中时间函数旁边的曲线图标，可以打开三次贝塞尔编辑器，拖动控制点并实时查看动画更新。

触发 CSS 过渡时，动画面板会记录这些过渡。请触发悬停或类切换，面板就会捕获该过渡。检查它的持续时间、延迟和时间函数，这在过渡效果异常但来源不明确时非常有用。

启用渲染 → 图层边框（DevTools → 渲染）后，位于独立 GPU 图层上的动画项目会显示绿色边框。未进行合成的动画（为宽度、顶部位置或颜色设置动画）不会显示图层边框，并且可能导致绘制闪烁；启用绘制闪烁后即可看到这种现象。

请在动画运行期间记录性能分析。在火焰图中，查找与动画帧相关的较长绘制或布局事件。仅由合成器处理的动画（变换/不透明度）只会显示为合成图层事件，运行速度快且无需绘制。

使用 rAF 的 JS 动画会出现在性能面板的帧部分。执行时间超过 16ms 的较长 rAF 回调会导致丢帧。请分析该回调以找出耗时计算，并在可能的情况下使用网页工作线程将其移出主线程。

网页动画接口（element.animate()）以及基于 WAAPI 的库，会与 CSS 动画一起出现在动画面板中。该面板无法区分动画来源——CSS 还是 WAAPI——但拖动查看和慢动作控制对两者都有效。

拖动动画面板中的播放头可以执行什么操作？

DevTools 动画面板会记录 CSS 过渡和动画，并提供可拖动查看的时间线、可变播放速度、关键帧检查和三次贝塞尔编辑功能。结合性能分析和图层可视化，它为调试 CSS 动画的正确性和性能提供了完整工具。