像您这样的读者支持 MUO。 如果您通过我们网站上的链接进行购买，我们可能会收到联属佣金。 阅读更多。

正确完成 CSS 动画可以将您的网站提升到一个新的水平。 但是，如果没有能够精确控制这些动画的工具，创建这些动画可能会很困难。 如果有一种方法可以准确地看到动画每一步发生的情况会怎么样？

两者的 DevTools 功能 Google Chrome 和 Firefox 提供查看动画的能力。 了解如何使用此功能来改进您自己的动画并对您最喜欢的网络动画进行逆向工程。

使用 DevTools 进行基本动画调试

Chrome 的开发工具是调试 CSS 等各个方面的好方法。 像这样简单地开始 example 了解如何使用它来检查动画。

这些示例的代码可在 GitHub 存储库。

使用 HTML 和 CSS 定义动画

以下 HTML 代码呈现一个包含两个元素的页面：

和一个 。 该页面还导入了一个名为 样式.css:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="box"></div>
    <button>Test Button</button>
  </body>
</html>

要设置这两个元素的样式，请创建一个 样式.css 将文件放在与 HTML 文件相同的文件夹中，并添加以下内容：

 #box {
  background: red;
  height: 400px;
  width: 400px;
  margin-bottom: 1rem;
  animation: rotateAndChangeColor 1000ms ease-in-out;
}

button {
  font-size: larger;
  background-color: white;
  border: 1px solid black;
  padding: 0.5em 1em;
  color: black;
  height: 80px;
  width: 300px;
  border-radius: 0.5em;
  transition: background-color 100ms ease-in-out, color 100ms ease-in-out;
  cursor: pointer;
}

button:hover {
  background-color: black;
  color: white;
}

@keyframes rotateAndChangeColor {
  0% {
    rotate: 0deg;
    background: red;
  }
  10% {
    background: green;
  }
  40% {
    background: blue;
  }
  70% {
    background: yellow;
  }
  100% {
    rotate: 360deg;
    background: red;
  }
}

这些样式由两个组成部分组成：

  • 一个简单的盒子，在页面加载时旋转并改变颜色。
  • 当您将鼠标悬停在其上时其背景颜色会发生变化的按钮。

请注意，红色框使用 @keyframe CSS 指令进行动画处理，而按钮则使用过渡。 这使您可以使用浏览器的开发工具来比较这两种方法。

使用 DevTools 探索动画

要访问 动画 跳入 Chrome 开发工具：

  1. 右键单击页面以显示上下文菜单。
  2. 点击 查看。
  3. 单击右上角的三点。
  4. 导航 更多工具 > 动画。

这将打开底部的动画抽屉。

页面上出现的任何动画都会显示在此处。 当您刷新页面并将鼠标悬停在按钮上时，动画将显示在“动画”选项卡中。

当您单击这些动画之一时，真正的力量就会显现出来。 例如，单击字段的动画将显示关键帧 Browser 显示如下：

DevTools 将显示与您选择的元素相关的所有动画。 由于只为红色字段定义了一个动画：旋转并改变颜色– 你只能看到细节。

您可以将线拖动到左侧以使动画更快，或将其拖动到右侧以减慢动画速度。 您还可以通过切换暂停和播放图标在特定点暂停动画。 使用上面的百分比，您可以以正常速度的四分之一或十分之一的速度播放动画。

当您检查按钮转换时，DevTools 会显示转换的各个属性：颜色和背景颜色。

该工具允许您操纵动画以准确了解其工作原理。 如果遇到任何问题，您可以使用它来解决您的网站问题。

高级动画示例

首先，替换 HTML 中的标记 带有以下标记的标签：

 <div class="move-me move-me-1">steps(4, end)</div>
<br />
<div class="move-me move-me-2">steps(4, start)</div>
<br />
<div class="move-me move-me-3">no steps</div>

然后替换你的所有样式 样式.css 文件与此：

 .move-me {
  display: inline-block; 
  padding: 20px;
  color: white;
  position: relative;
  margin: 0 0 10px 0;
}

.move-me-1 {
  animation: move-in-steps 8s steps(4, end) infinite;
}

.move-me-2 {
  animation: move-in-steps 8s steps(4, start) infinite;
}

.move-me-3 {
  animation: move-in-steps 8s infinite;
}

body {
  padding: 20px;
}

@keyframes move-in-steps {
  0% {
    left: 0;
    background: blue;
  }

  100% {
    left: 100%;
    background: red;
  }
}

一切

元素有 一步步 对它们应用动画来改变位置和背景颜色。 此外，每个框都有不同的动画来控制步数。

当第三个框稳定地向右滑动时，前两个框各移动两步，直到它们全部到达屏幕末端（第二个框在第一个框之前开始）。

当您打开 动画 单击“DevTools”选项卡并刷新页面。 在那里您将找到有关这些动画的所有信息：

有几个元素，全部在同一时间段内动画。 在这种情况下，所有三个框的背景颜色和框位置都会同时进行动画处理。

另请注意每条动画线中的节点。 如果动画无限发生，则节点指示动画中每次重复的开始和结束位置。

空节点本质上是动画中的关键帧，而实心彩色节点代表动画的开始和结束。 每次动画重新开始时，节点都会变暗。

最后，您可以使用 DevTools 编辑动画，就像编辑任何 CSS 属性一样。 您通过动画 UI 所做的任何更改都会反映在下面的内联样式中 风格 选项卡，反之亦然。 这允许您进行更改、测试它们并将它们合并到您的实际项目中。

使用 Chrome 用于调试 CSS 的开发工具

DevTools 功能 Google Chrome 是一个用于调试 CSS（包括动画）的出色工具。 它提供了页面上所有过渡和动画的详细视图，因此您可以准确地看到每一步发生的情况。

作为一名 Web 开发人员，您应该熟悉浏览器的 DevTools 功能或等效功能。