在 DevTools 中检查动画

前几天，我偶然发现了 Chrome DevTools 中的“动画”面板，简直欣喜若狂。我不仅完全不知道有这样的东西存在，而且它比我期望的还要好：它允许你控制和操作 CSS 动画，*并且*可视化所有幕后工作原理。

要访问该面板，请在 DevTools 打开时，点击右上角菜单中的“更多工具 → 动画”。

我发现的许多关于此主题的教程都相当复杂，所以让我们先退一步，看看一个更简单的例子：这是一个演示，其中 html 元素的背景颜色将在悬停时从黑色过渡到橙色。

html {
  cursor: pointer;
  background-color: #333;
  transition: background-color 4s ease;
}

html:hover {
  background-color: #e38810;
}

假设我们想将该过渡时间从 4s 缩短。在元素检查器中不断调整这个数字可能会很烦人。我通常会打开 DevTools，在 DOM 中找到该元素，然后通过键入值或使用键盘方向键非常缓慢地操作它。相反，我们可以启动该演示，打开 DevTools，并切换到“动画”选项卡，它应该看起来像这样。

默认情况下，Chrome 会“监听”动画的发生。一旦发生，它们就会被添加到列表中。看到这些动画块以类似音频波形的方式显示了吗？那是动画的一帧或一个动作，你可以在它上方的时线上看到后续的每一帧。在动画本身中，检查器甚至会向我们显示正在更改的属性，例如 background-color 或 transform。*这有多棒？*

然后，我们可以通过抓住该条并四处移动来修改该动画。

…它会立即更新动画——不再需要像以前那样点击并编辑动画了！此外，你可能已经注意到，将鼠标悬停在动画帧上会以蓝色突出显示正在被动画化的元素。如果你正在编辑一个复杂的动画并且忘记了那个疯狂的伪元素的作用，这将非常方便。如果页面上有多个动画，那么你可以在该部分中看到它们全部列出，就像在此演示中一样。

我们在这里做的是在将鼠标悬停在 html 元素上时，同时为 .square 和 .circle 制作动画，因此实际上是在同一时间范围内为两个单独的 div 制作动画——这就是为什么你可以在同一部分中看到它们的原因。

我可以看到，以这种方式检查动画对于微小的图标设计也超级有用。以 Jesse Couch 的 汉堡菜单动画 这个笔为例，你可能希望放慢所有速度以使效果*恰到好处*。好吧，使用动画检查器工具，你可以做到这一点。

左上角的这些按钮将控制动画的播放速度。因此，点击 10% 将使速度慢到爬行——给你足够的时间真正调整细节，直到完美为止。

我这里主要关注 Chrome，但它并不是唯一一个具有动画检查器的浏览器——Firefox 的工具 在各个方面都同样有用。我发现的唯一直接区别是，Chrome 会监听页面上的任何动画，并在捕获后显示它们。但是，在 Firefox 中，你必须检查元素，然后它才会显示附加到该元素的动画。因此，如果你正在制作超级复杂的动画，那么 Chrome 的工具可能会稍微更有用。

动画检查器文档

• Google 开发者指南
• Firefox 中的动画检查器 – MDN