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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

概览

如需拍摄动画，请打开动画面板。它会自动检测动画并将其分类。

Animations 面板有两个主要用途：

  • 检查动画。减慢动画速度、重放动画或检查动画的源代码 。
  • 修改动画。修改 动画组。不支持修改关键帧和贝塞尔曲线。
。

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

什么是动画组？

动画组是一组看起来彼此相关的动画。

目前，网络还没有真正的组动画概念，因此动画设计人员和开发者需要组合各个动画并为其设置时间，使它们呈现为一种连贯的视觉效果。Animations 面板会根据开始时间（不包括延迟）预测相关动画，并将其并排分组。

换言之，Animations面板可将同一脚本块中触发的动画归为一组，但如果是异步的，则归为不同的组。

打开“动画”面板

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

  • 选择 更多。 自定义和控制开发者工具 >更多工具 >动画。 菜单中的动画。

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

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

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

默认情况下，动画面板会在控制台抽屉式导航栏旁边作为标签页打开。作为抽屉式导航栏标签页，您可以将其用于任何面板，也可以将其移至开发者工具顶部。

空的“动画”面板。

当您打开动画面板时，该面板会自动拍摄正在播放的动画。如果动画在网页加载时触发或已经停止，请在面板处于打开状态时重新加载页面。

熟悉“动画”面板界面

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

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

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

  2. 概览 - 显示截取的两类动画组（带有图标：鼠标滚动驱动型动画和 schedule 常规（基于时间）动画组）。

    在此处选择一个动画组，以在 Details 窗格中进行检查和修改。

  3. 时间轴。根据动画组的类型，时间轴可采用以下格式：

    • 对于鼠标滚动驱动的动画，以像素为单位。
    • 对于调度基于时间的动画，以毫秒为单位。

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

  4. 详情。检查和修改所选的动画组。

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

检查动画

捕获动画后，您可以通过以下几种方式重放动画：

  • 在 Overview 窗格中将鼠标悬停在相应缩略图的缩略图上，即可查看它的预览。
  • 拖动进度条指针（红色竖线）可拖动视口动画；点击时间轴上的任意位置，即可将进度条指针定位到特定时间点。如果动画已在播放，则继续播放；否则停止。
  • 从 Overview 窗格中选择动画组（使其显示在详细信息中） 窗格），然后按 “重放”按钮。 Replay 按钮。通过 动画会在视口中重放。

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

查看动画详情

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

在 Details 窗格中，每个动画都各成一行。要查看相应元素的完整名称，请调整名称列的大小。

“详细信息”窗格。

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

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

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

动画迭代。

动画最左侧的深色部分是其定义。右侧较淡的版块 代表迭代。

例如，在下一个屏幕截图中，第二部分和第三部分分别表示 第一部分的迭代。

动画迭代示意图。

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

使用颜色标识的动画。

修改动画

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

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

在本部分中，假设下一个屏幕截图代表原始动画：

修改前的原始动画。

要更改动画的时长，请拖动第一个或最后一个圆圈。

修改后的时长。

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

已修改关键帧。

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

延迟已修改。

修改已发布的@keyframes

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

请在此演示页面上试用：

  1. 打开动画面板。它会自动捕捉网页上正在播放的脉冲动画。在操作栏中的控件下选择动画。
  2. 在Elements中，使用 class="pulser" 检查元素，并在Elements中找到 @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)

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

  1. 打开开发者工具并检查使用 View Transitions API 的页面。例如，此演示页面。
  2. 在动画中，点击暂停 暂停。

  3. 在网页上触发动画。Animations 面板被捕获后会立即暂停。现在，您可以在 DOM 中的 <head> 元素顶部找到 ::view-transition 结构。

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

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

  5. 恢复动画并重放以查看结果。

如需了解详情，请参阅使用 View Transitions API 实现平滑简单的过渡。