动画：检查和修改 CSS 动画效果

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用 Chrome DevTools 的 Animations 抽屉式标签页检查和修改动画。

概览

如需捕获动画，请打开动画面板。检查器会自动检测动画并将它们分类为多个组。

Animations 面板有两个主要用途：

  • 检查动画。放慢速度、重放或检查动画组的源代码。
  • 修改动画。修改动画组的时间、延迟、时长或关键帧偏移量。不支持关键帧和贝塞尔曲线编辑。

动画面板支持 CSS 动画、CSS 过渡、网络动画和 View Transitions API。 尚不支持 requestAnimationFrame 动画。

什么是动画组？

动画组是一组看上去彼此相关的动画。

目前，网页没有真正概念的组动画，动画设计师和开发者必须编排和设置各个动画的时间，让它们看上去有一种连贯的视觉效果。Animations 面板会根据开始时间（不包括延迟）预测相关动画，并将它们并排分组。

也就是说，动画面板会将在同一脚本块中触发的动画分为一组，但如果这些动画是异步的，则会分到不同的组。

打开“动画”面板

您可以通过以下两种方式打开动画面板：

  • 依次选择 更多。 Customize and control DevTools > More tools > Animations。 菜单中的动画。

  • 按以下任一键打开命令菜单：

    • 在 macOS 上：Command + Shift + P
    • 在 Windows、Linux 或 ChromeOS 上：Ctrl+Shift+P

    然后，开始输入 Show Animations 并选择相应的抽屉式面板。 显示“动画”。

默认情况下，动画面板会在 Console 抽屉旁作为标签页打开。作为抽屉式导航栏标签页，您可以将其与任何面板搭配使用，也可以将其移至 DevTools 顶部。

空的“动画”面板。

动画面板会在您打开时自动捕获正在进行的动画。如果动画在页面加载时触发或已停止，请在面板打开的情况下重新加载页面。

熟悉“动画”面板界面

Animations 面板包含四个主要部分：

“动画”面板的各个部分。

  1. 控制措施。在这里，您可以清除所捕获的所有动画组，暂停或恢复动画，或者更改所选动画组的速度。

  2. 概览 - 显示两种类型的捕获动画组（用图标标记）：滚动驱动型和（基于时间）安排型。

    在这里选择动画组，然后在详情窗格中进行检查和修改。

  3. 时间轴。时间轴的长度取决于动画组的类型：

    • 以像素为单位，适用于滚动驱动的动画。
    • 对于基于时间的动画，以毫秒为单位。

    在时间轴中，您可以 重放动画、拖动动画或跳转到特定点。

  4. 详细信息。检查和修改所选的动画组。

要拍摄动画，请在 Animations 面板处于打开状态时触发该动画。

检查动画

捕捉动画后，可以通过以下几种方式重播动画：

  • 在概览窗格中将鼠标悬停在动画的缩略图上方，查看它的预览。
  • 拖动进度条指针（红色垂直条）可拖拽视口动画，或点击时间轴上的任意位置可将进度条指针设置为特定点。如果动画已在播放，则继续播放；否则停止播放。
  • 从 Overview 窗格中选择动画组（使其显示在 Details 窗格中），然后按 “重放”按钮。 Replay 按钮。动画会在视口中重播。

点击控件栏中的 动画速度按钮。 Animation speed 按钮，即可更改所选动画组的预览速度。

查看动画详情

拍摄动画组后，在 Overview 窗格中点击该动画组即可查看其详细信息。

在详细信息窗格中，每个动画会单独成行。如需查看相应元素的完整名称，请调整名称列的大小。

“详细信息”窗格。

将鼠标悬停在动画上，即可在视口中突出显示该动画。点击动画，在 Elements 面板中将其选中。

将鼠标悬停在动画上可在视口中突出显示该动画。

如果某些动画的 animation-iteration-count 属性设为 infinite，则会无限期重复。Animations 面板会显示其定义和迭代。

动画迭代。

动画最左侧的深色部分是其定义。右侧的浅色部分表示重复。

例如，在下图中，第二和第三部分表示第一部分的重复。

动画迭代示意图。

如果两个元素应用了同一个动画，Animations 面板就会为它们分配相同的颜色。颜色本身是随机的且没有意义。例如，在下方的屏幕截图中，两个元素 div.eye.left::after 和 div.eye.right::after 已应用了同一个动画 (eyes)，div.feet::before 和 div.feet::after 元素也同样如此。

带有颜色编码的动画。

修改动画

您可以通过以下三种方式使用动画面板修改动画：

  • 动画时长。
  • 关键帧时间。
  • 开始时间延迟。

对于本部分，假设下图代表原始动画：

修改前的原始动画。

如需更改动画的持续时间，请拖动第一个或最后一个圆圈。

修改后的时长。

如果动画定义了任何关键帧规则，那么这些将表示为白色内圈。拖动其中一个，更改关键帧的显示时间。

修改后的关键帧。

要为动画添加延迟，请点击动画本身（而不是圆圈），然后将其拖动到任意位置。

修改后的延迟时间。

修改@keyframes直播

在样式中修改 @keyframes 后，您可以立即在动画面板中看到效果。

您可以在此演示页面上试用：

  1. 打开动画面板。它会自动捕获页面上正在进行的脉冲动画。在操作栏中的“控件”下方选择动画。
  2. 在元素中，使用 class="pulser" 检查元素，然后在样式中找到 @keyframes pulse 部分。
  3. 尝试修改关键帧，例如将第二个关键帧从 50% 更改为 20%。
  4. 观察您在样式中的更改对动画面板捕获的动画有何影响。

在动画期间修改 ::view-transition 伪元素

借助 View Transitions API，您可以一步更改 DOM，同时在两种状态之间创建动画转换。在动画播放期间，API 会构建一个具有以下结构的伪元素树：

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

如需在元素 > 样式中修改此结构，请执行以下操作：

  1. 打开 DevTools，然后检查使用了 View Transitions API 的网页。例如，此演示页面。
  2. 在动画中，点击 暂停。

  3. 在网页上触发动画。动画面板会捕获该事件并立即暂停。现在，您可以在 DOM 中找到 ::view-transition 结构，它位于 <head> 元素之上。

    修改 ::view-transition 伪元素的 CSS。

  4. 在元素 > 样式中，修改 ::view-transition 伪元素的 CSS。

  5. 继续动画并重放动画，查看结果。

如需了解详情，请参阅使用 View Transitions API 实现流畅简单的转换。