Chrome 开发者工具 DevTools 中有一个动画面板，默认情况下它是关闭的，很多人可能不太清楚这个功能。它可以让你控制和操纵 CSS 动画，并且可视化这些动画是如何工作的。
要打开该面板，可以在 DevTools 右上角菜单 → More tools 中打开 Animations ：
这里用一个简单的动画示例来演示 DevTools 动画面板是如何工作的：
html {
cursor: pointer;
background-color: #333;
transition: background-color 4s ease;
}
html:hover {
background-color: #e38810;
}一般情况下，我们想要一个过渡，只能通过想象的数字（秒）来达到期望中的效果，对于一些需要很精准的动画来说，这不是一个好方法。但是你可以打开 DevTools ，在 DOM 中找到元素，然后可视化它的整个动画过程：
默认情况下，DevTools 会“监听”动画。一旦触发，它们将被添加到列表中。你能看到这些动画块如何显示。在动画本身上，DevTools 会向我们展示哪些属性正在更改，例如 background-color 或 transform 。
然后，我们可以通过使用鼠标拖动或调整时间轴来修改该动画：
并且立即更新动画。此外，你可能已经注意到，将鼠标悬停在动画框架上会突出显示某一个动画的元素。如果你正在编辑一个复杂的动画并且忘记那个元素是什么，这是很方便的。如果你在页面上有多个动画，那么它们会被全部列出，就像本演示中所示：
以这种方式检查动画对于小图标设计也是非常有用的。这里有一个汉堡菜单动画，你如果想要慢动作看清楚动画。那么，通过动画检查工具，你可以做到这一点：
左上角的这些按钮将控制动画的播放速度。所以点击 10% 会让动画变得缓慢 – 让你有足够的时间来看清楚和调整动画，直到完美。
Firefox 也有类似的动画工具，但是 Chrome 会监听页面上的任何动画，并在捕捉后显示它们。而 Firefox，你必须检查元素，然后才会显示附加到该元素的动画。所以，如果你正在制作超级复杂的动画，那么 Chrome 的工具可能会更有帮助。
这里还有一些关于动画检查器的文档：
