Google Chrome 如何使用 Chrome DevTools 检查 CSS 动画 TweetShareSharePin0 Shares CSS 动画如果做得正确，可以将您的网站提升到另一个水平。 但是，如果没有能够对这些动画进行精细控制的工具，创建这些动画可能会很棘手。 如果有一种方法可以准确地看到动画每一步发生的情况怎么办？ Google Chrome 和 Firefox 的 DevTools 功能都能够检查您的动画。 了解如何使用此功能来改进您自己的动画并对您最喜欢的网络动画进行逆向工程。 Chrome 的 DevTools 是调试 CSS 各个方面的好方法，甚至更多。 从这个简单的示例开始，了解如何使用它来检查动画。 目录 Toggle使用 HTML 和 CSS 定义动画使用 DevTools 检查动画 高级动画示例 使用 HTML 和 CSS 定义动画 以下 HTML 呈现一个包含两个元素的页面： 和 。 该页面还导入一个名为 style.css 的 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="https://wilku.top/how-to-inspect-your-css-animations-with-chrome-devtools/style.css"> </head> <body> <div id="box"></div> <button>Test 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; }} 这些样式创建两个组件： 一个简单的盒子，在页面加载时旋转并改变颜色。 当您将鼠标悬停在其上时会更改其背景颜色的按钮。 如何报告问题或发送有关 Chrome 操作系统的反馈 请注意，红色框使用 CSS @keyframe 指令进行动画处理，而按钮则使用过渡。 这使您可以使用浏览器的开发工具来比较这两种方法。 使用 DevTools 检查动画 要访问 Chrome DevTools 中的“动画”选项卡： 右键单击您的页面以显示上下文菜单。 单击“检查”。 单击右上角的三点。 导航到更多工具 > 动画。 这将打开底部的动画抽屉。 页面上出现的任何动画都会显示在此处。 如果刷新页面并将鼠标悬停在按钮上，动画将显示在动画选项卡下。 当您单击这些动画之一时，真正的力量就会显现出来。 例如，如果单击该框的动画，您将看到浏览器显示如下关键帧： DevTools 显示与您选择的元素相关的所有动画。 由于只为红色框定义了一个动画（rotateAndChangeColor），因此您只能看到其详细信息。 您可以将线拖动到左侧以使动画更快，或将其拖动到右侧以减慢动画速度。 您还可以通过切换暂停和播放图标在某些点暂停动画。 顶部的百分比允许您分别以正常速度的四分之一和十分之一的速度播放动画。 当您检查按钮转换时，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> 然后将 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; }} 所有 元素都应用了逐步移动动画，该动画会转换位置和背景颜色。 除此之外，每个框都有不同的动画来控制它将采取的步骤数。 如何向 Google Chrome 主页添加快捷方式当第三个框稳定地向右滑动时，前两个框将一次移动两步，直到它们全部到达屏幕末端（第二个框在第一个框之前开始）。 如果您在 DevTools 中打开“动画”选项卡并刷新页面，您将找到与这些动画相关的所有信息： 有几个元素都是在同一时期内产生动画的。 在此场景中，所有三个框的背景颜色和框位置同时动画。 另一件需要注意的事情是每条动画线上的节点。 当动画发生无限次时，节点会显示动画中每次重复的开始和结束位置。 空节点本质上是动画中的关键帧，而实心的彩色节点代表动画的开始和结束。 每次动画重新开始时，您都会有深色节点。 最后，您可以使用 DevTools 编辑动画，就像使用任何 CSS 属性一样。 您使用动画 UI 所做的所有更改都将显示在“样式”选项卡下的内联样式中，反之亦然。 这使您可以进行更改、测试它们并将它们复制到您的实际项目中。 Google Chrome 的 DevTools 功能是一个很棒的工具，用于调试 CSS（包括动画）。 它提供了页面上每个过渡和动画的详细视图，因此您可以准确地看到每一步发生的情况。 作为一名 Web 开发人员，您应该熟悉浏览器的 DevTools 功能或其等效功能。 You might also like 如何在 Chrome 中管理已保存的密码 2022-01-292022-03-04 如何在 Chrome 上启用画中画 2022-02-032022-03-04 如何在 Chrome 和 Chromebook 上以访客身份浏览 2022-01-312022-03-04
