检查和修改CSS 动画效果- Microsoft Edge Development

什么是动画组？

动画组 是一组可能彼此相关的动画。目前，Web 没有组动画的实际概念，因此运动设计人员和开发人员必须撰写和计时单个动画，以便动画呈现为一个连贯的视觉效果。动画检查器根据开始时间预测哪些动画相关， (排除延迟等) 。动画检查器还会将动画并排分组。

换句话说，在同一脚本块中触发的一组动画组合在一起。如果动画是异步的，则将其放置在单独的组中。

若要打开动画检查器，请在 DevTools 中使用以下任一方法：

从 main工具栏 或抽屉中：单击“ 更多工具 ( ) 按钮，然后选择“ 动画 ”。

在“ 自定义 ”菜单中：单击“ 自定义和控制 DevTools ( ) 菜单按钮，指向“ 更多工具 ”子菜单，然后选择“ 动画 ”。

在 命令菜单中 ：当 DevTools 具有焦点时，在 Windows/Linux 上按 Shift+Ctrl+P 或在 macOS 上按 Command+Shift+P 打开 命令菜单 ，开始键入 animations ，然后选择“ 抽屉：显示动画 ”。

默认情况下，动画工具在 控制台 工具旁边的抽屉中打开。通过使用抽屉上的动画工具，可以同时使用main工具栏上的其他工具。

动画检查器分为四个main部分， (或窗格) 。本指南将引用每个窗格，如下所示：

将鼠标悬停在“ 概述 ”窗格中的缩略图上以查看其预览。

从“ 概述 ”窗格 (选择“动画组”，使其显示在“ 详细信息 ”窗格中) ，然后单击重播 (

) 图标。动画在视区中重播。单击 动画速度 (

) 图标可更改当前所选动画组的预览速度。可以使用红色垂直条来更改当前位置。

单击并拖动红色垂直条以清理视区动画。

查看动画详细信息

捕获动画组后，在“ 概述 ”窗格中单击它以查看详细信息。在“ 详细信息 ”窗格中，每个单独的动画都分配给一行。

将鼠标悬停在动画上以在视区中突出显示它。单击动画以在 “元素” 工具中选择它。

动画最左侧、较深的部分是其定义。右侧更淡化部分表示迭代。例如，在下图中，第二节和第三节表示第一部分的迭代：

如果两个元素应用了相同的动画，动画检查器会为元素分配相同的颜色。颜色是随机的，没有意义。例如，在下图中，两个元素 div.cwccw.earlier 和 div.cwccw.later 具有相同的动画 ( spinrightleft ) 应用，和 div.ccwcw.later 元素也是如此 div.ccwcw.earlier 。

有三种方法可以使用动画检查器修改动画：

动画持续时间。

关键帧计时。

开始时间延迟。

对于本部分，假设下面的屏幕截图表示原始动画：

若要更改动画的持续时间，请单击并拖动第一个或最后一个圆圈。

如果动画定义了任何关键帧规则，则这些规则表示为白色填充的内部圆。单击并拖动一个白色的内圆以更改关键帧的计时：

若要向动画添加延迟，请单击除圆圈以外的任意位置的动画，然后将其拖动：

此页面的部分内容是基于 Google 创建和共享的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。原始页面在此处找到，由凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。