如何使用 Chrome DevTools 检查 CSS 动画 2025-01-132023-09-12 作者 exe TweetShareSharePin0 Shares 目录 Toggle 利用开发者工具审查 CSS 动画使用 HTML 和 CSS 定义动画使用开发者工具检查动画高级动画示例 利用开发者工具审查 CSS 动画 精心设计的CSS动画能显著提升网站的用户体验。然而，在缺乏精细控制工具的情况下，创建这些动画可能会颇具挑战。如果可以精确地观察动画的每一个步骤，那会带来极大的便利。 谷歌 Chrome 和 Firefox 浏览器都具备开发者工具，可以检查页面动画。掌握这些工具的使用方法，可以有效改善你的动画设计，甚至对喜爱的网页动画进行逆向工程。 Chrome 开发者工具是调试CSS的强大助手，它不仅限于此。我们将从一个简单示例入手，学习如何运用它来检查动画。 使用 HTML 和 CSS 定义动画 以下 HTML 代码创建了一个包含两个元素的页面： 和 。 页面还引入了一个名为 style.css 的 CSS 文件： <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文档</title> <link rel="stylesheet" href="https://wilku.top/how-to-inspect-your-css-animations-with-chrome-devtools/style.css"> </head> <body> <div id="box"></div> <button>测试按钮</button> </body> </html> 为了设置这两个元素的样式，在 HTML 文件所在的文件夹中创建一个名为 style.css 的文件，并添加如下内容： #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; } } 这些样式将创建两个组件： 一个简单的盒子，加载时会旋转并改变颜色。 一个按钮，当鼠标悬停在其上时会改变背景颜色。 请注意，红色方块使用 CSS @keyframe 指令来实现动画效果，而按钮则使用了过渡效果。这便于我们使用浏览器开发者工具来对比这两种方法。 使用开发者工具检查动画 要打开 Chrome 开发者工具中的“动画”面板，请执行以下步骤： 右键单击页面，在弹出菜单中选择“检查”。 在开发者工具窗口右上角点击三个点按钮。 选择 “更多工具” > “动画”。 这将在底部打开动画抽屉。 页面上发生的任何动画都将显示在此处。 刷新页面，并将鼠标悬停在按钮上，动画会立即在动画面板中显示。 点击这些动画项，就会展现真正的力量。例如，点击方框的动画，你会看到浏览器显示关键帧，如下所示： 开发者工具会展示与你选择的元素相关的所有动画。因为红色方块只定义了一个动画（rotateAndChangeColor），你将只看到它的详细信息。 你可以拖动动画线上的点向左来加快动画速度，或向右来减慢动画速度。你还可以通过点击暂停和播放图标来暂停动画。顶部的百分比则允许你分别以正常速度的四分之一和十分之一的速度播放动画。 当你检查按钮过渡时，开发者工具会显示过渡的各个属性：颜色和背景颜色。 这个工具可以让你操纵动画，以准确了解其工作原理。如果出现任何问题，你可以使用它来诊断你的网站问题。 高级动画示例 首先，将 HTML <body> 标签内的内容替换为以下代码： <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> 然后，将 style.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; } } 所有 <div> 元素都应用了逐步移动动画，该动画会改变元素的位置和背景颜色。此外，每个方框都有不同的动画，来控制它将采取的步数。 当第三个方框平滑地向右滑动时，前两个方框将一次移动几步，直到它们到达屏幕的末端（第二个方框比第一个方框先开始移动）。 如果在开发者工具中打开“动画”面板并刷新页面，你将找到与这些动画相关的所有信息： 有多个元素在同一时间段内产生动画效果。在此示例中，三个方框的背景颜色和位置同时发生动画。 另外需要注意的是每条动画线上的节点。当动画无限次循环时，节点会显示动画每次重复的开始和结束位置。 空心节点本质上是动画的关键帧，而实心彩色节点代表动画的开始和结束。每次动画重新开始时，你会看到一个深色节点。 最后，你可以像编辑任何 CSS 属性一样使用开发者工具编辑动画。你在动画界面所做的所有更改都将显示在“样式”选项卡下的内联样式中，反之亦然。这允许你进行更改，测试它们，并复制到你的实际项目中。 Google Chrome 的开发者工具是一个非常棒的工具，用于调试 CSS（包括动画）。它提供了页面上每个过渡和动画的详细视图，因此你可以准确地看到每一步发生的情况。 作为一名 Web 开发人员，你应该熟悉浏览器的开发者工具或其等效功能。