深度解析动画调试的精髓
通过前面课程的学习，我想你已经掌握了 Web 动画的原理、设计原则、速度、时间以及制作动画的相关知识和技巧。在这个学习过程中，我想你已经感受到了，创建 Web 动画要学习很多知识，但要创建一种美丽而直观的动画效果，则需要更多微妙的技巧。由于动画吸引了如此多的注意力，因此重要的是要优化我们的代码，确保时间正确，并在出现问题时进行调试。
我曾说过，创建一个优雅、引人入胜的动画并不是一蹴而就的，需要不断的调试和优化。这意味着，你除了要掌握创作动画的知识和技巧之外，还要掌握如何调试动画，只有掌握了调试动画的技巧，才能更好的地创建出引人入胜、流畅自然的动画效果。
在这节课中，我们将和大家一起来探讨动画调试的关键方面，通过介绍调试工具、时间优化、典型问题解决和实例分析等内容。通过这节课的学习，我相信大家将能够更自信、更高效地处理和调试复杂动画，从而提升用户体验和界面设计的质量。
动画调试很重要
当你看到一个炫酷且优雅，引人入胜而又流畅的动画时，不知道是否和我一样，会感到惊讶，甚至有的时候还会有一种跃跃欲试的冲动，也希望自己能创造出如此优秀的动画效果。
事实上，我们看到的仅仅是呈现在眼前的动画效果，但并不知道动画背后创作者所付出的艰辛与努力。要知道，任何一个优秀的作品，它都不是一气呵成，一蹴而就的，是需要不断的打磨与修改的。同样的，吸引你眼球的动画效果，它同样需要不断的调试与修改，才能最终达到令人满意的效果。
不管是对于动画本身，还是作为一名 Web 开发者或 Web 动画师，都有必要掌握如何调试动画的工具和技巧。除此之外，动画调试在创建动画中不仅仅有助于确保动画的正确性和流畅性，还直决定着动画最终的效果以及直接影响用户体验的品质。
为什么这么说呢？我从以下几个不同的角度来解释动画调试的重要性以及它对用户体验的积极影响：
- 确保动画正确性和一致性：动画调试是发现和解决潜在问题的关键步骤。它可以帮助 Web 开发者发现动画中的错误，例如关键帧位置、缓动函数的选择等。其次，不同平台和浏览器可能对动画的支持存在差异，而调试有助于确保动画在各种环境中表现一致，提高跨平台兼容性。
- 优化性能和流畅度：动画过于复杂或执行效率低可能导致页面性能下降。调试可以帮助识别和优化影响性能的部分，确保动画流畅运行，它还有助于发现导致卡顿或延迟的问题，通过优化可以确保动画的即时响应性。
- 调整时序的效果以提高用户体验：时序和缓动函数对于动画来说是非常重要的。动画调试可以帮助我们精确控制动画时序，确保动画在用户界面上按照设计预期产生。合理的时序调整能够提高用户对界面变化的感知和理解。另外，通过调试，可以选择最适合设计目标的缓动函数，提高用户体验的舒适度。注意，选择合适的缓动函数是创建自然流畅动画的关键之一。
- 交互引导和用户反馈：动画通常用于传达交互状态、提供反馈和引导用户操作。动画调试有助于确保动画引导用户关注的效果良好，使用户能够更容易地发现和理解界面上的关键元素。其次，动画调试还可以确保动画用于传达状态变化是清晰而直观的，帮助用户更好地理解系统的状态。
- 避免视觉干扰和不适： 错误的动画可能导致用户感到不适或干扰其使用体验。通过调试，可以发现并修复可能导致眩晕、不协调或其他视觉不适的问题，确保动画流畅自然、不分散用户注意力。
- 提高开发效率：调试工具和技术可以帮助开发人员更快速地发现和解决问题，减少开发周期，提高整体开发效率。
- 用户体验的整体提升： 动画是用户界面的关键组成部分之一，对于用户体验至关重要。良好设计的动画可以吸引用户的注意力、提升界面的吸引力，而动画调试是创造引人入胜、流畅自然的用户体验的关键一步。通过确保动画的精确性和效果，提高用户与产品交互的愉悦感。
动画调试不仅仅是一种技术手段，是确保动画在设计和开发过程中正确实现、无缺陷地运行的关键步骤，更是确保用户体验优秀的不可或缺的步骤。通过解决问题、优化性能、调整时序和效果，动画调试直接影响用户界面的质量，为用户提供更流畅、更直观、更有吸引力的交互体验。
动画调试工具概览
我们所创作的动画主要承载的平台之一就是 Web 浏览器，而且我们平时的预览和测试基本上都在浏览器上，因此我们动画调度主要还是依赖于浏览器的 Web 开发者工具，即“检查”（Inspect）：
现代 Web 浏览器，例如 Chrome、Firefox、Safari 和 Edge 等都在代码检查器中提供了动画（Animations）标签选项：
正如你所看到的，不同的浏览器动画调试面板会有所差异，但它们的使用以及功能是基本相似的。动画标签（Animation）有两个主要用途：
- 检查动画： 放慢、重放或检查动画组的源代码。
- 修改动画： 修改动画组的时间、延迟、时长或关键帧偏移。不支持修改关键帧和贝塞尔曲线。
我们通常使用该调试工具（浏览器开发者自带的“动画”调试工具）来调试 CSS 的过渡动画（transition）和关键帧动画（animation）。对于 JavaScript 相关 API 创建的动画，例如 requestAnimationFrame 动画还无法通过该工具来调试，如果你需要调试此类动画，则需要具备调试 JavaScript 方面的知识与技巧，但这已超出这节课的范畴，因此不在此做过多的阐述。
特别声明，接下来的内容将以 mac OS 系统中的 Chrome 浏览器的动画调试工具为主，如无特殊说明，接下来的演示都是 Chrome 浏览器中动画调试工具。我写这节课使用使用的 Chrome 版本号是 120.0.6099.129。
了解动画调试工具基本功能
为了能更好的向大家演示动画调试工具的基本功能，我在这里创建了一个最简 CSS 过渡动画和关键帧动画：
<button class="transition">CSS Transition</button>
<button class="animation">CSS Animations</button>@layer transition {
.transition {
color: var(--btn-color, #000);
background: #fff;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
&::before {
background: var(--btn-bg);
scale: 0 1;
transform-origin: right;
transition: scale 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
&:hover {
color: white;
background: transparent;
&::before {
scale: 1 1;
transform-origin: left;
}
}
}
}
@layer animation {
@keyframes bounce {
from,
20%,
53%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
translate: 0 0 0;
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
translate: 0 -20px 0;
scale: 1 1.1;
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
translate: 0 -10px 0;
scale: 1 1.05;
}
80% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
translate: 0 0 0;
scale: 1 0.95;
}
90% {
translate: 0 -4px 0;
scale: 1 1.02;
}
}
.animation {
color: var(--btn-color, #000);
background: var(--btn-bg);
transform-origin: center bottom;
&:hover {
animation: bounce 1s cubic-bezier(0.77, 0, 0.175, 1);
}
}
}如果你想通过浏览器开发者工具来调试动画，首先得打开动画调试面板。
你可以通过以下两种方式来打开动画（Animations）选项：
在开发者调试工具中，从“自定义和控制开发者工具 > 更多工具 > 动画” 中打开：
另外一种方式是，按下图这样打开动画调试面板：
在开发者调试工具打开状态下，同时按下 Command + Shift + P （macOS 系统，其它系统可以尝试同时按下 Ctrl+Shift+P ）键，然后在弹出面板的 run 后面输入 “Show Animations” 后回车，也可以打开动画调试面板：
不管你使用哪种方式打开动画调试面板，默认情况下，你可能看到的动画调试面板可能会像下面这样：
没有任何东西，对吧。但你触发了动画，那么面板将会将相关动画在这里呈现：
如果页面加载完就有动画在播放，那么打开动画调试面板，再次刷新页面的时候，就可以有相应的动画在调试面板中呈现：
如上所述，如需拍摄动画，请在动画标签页打开时触发该动画。如果动画在网页加载时触发，请重新加载。
整个动画调试面板包含四个部分：
①控制措施：在这里，你可以清除所有捕获的动画组，或者改选动画组的播放速度：
其中改选动画组的播放速度在调试动画时非常有用。有的时候，动画按正常速度播放（100% 速度）很难发现动画有问题；不过，有的时候将动画播放速度调慢，比如放慢四倍速度（25% 速度）播放，更容易发现动画组存在的问题，比如动画时序问题。简单地说，这种方式易于发现动画不一致性。
对于清除动画组就比较容易理解了，它一般是用在重新录制动画组的情境中。假设你在调试动画时，在动画调试面板中没有录制好要调试的动画，你可以点击“清除”按钮，将录制的动画组清除干净。然后再重新录制。
②概览： 它也有两个功能，第一个功能相当于预览功能。当你在动画调试面板中录制了多个动画组时，只需要将鼠标悬浮在对应的缩略图上，就可以看其对应的动画是哪一个动画组：
另一个功能是，你选择某一个动画组的预览图，该动画组的相关信息将会在“详细信息”窗格中显示：
这样，你就可以在“详细信息”窗格中对检查和修改所选的动画组。
③时间轴：可以用来控制动画组的启动和暂停：
还可以拖动动画或跳转到特定点：
④详细信息：你在“概览”窗格中选中的动画组的详细信息会在“详细信息”窗格中显示，我们可以在这里检查和修改所选的动画组。这也是动画调试面板中最为重要的部分。
简单地说，我们检测和调试一个动画组，基本上都在这里完成。
检查动画
不知道大家是否还记得，在介绍动画延迟时间和持续时间以及多个动画和合成时，强调过动画编排的概念。我们通过时间来控制动画出现的时序，尽可能的使动画更协调和一致。当然，你也可以通过 CSS 过渡动画和关键帧动画的相关事件画控制，可以使动画更精致一些，但相应的成本和难度也增加了。
换句话说，我们是在通过“动画组”这样的概念使得一组动画（多个动画）看上去彼此相关。事实上，到目前为止，Web 中没有真正的组动画概念，因此动画设计师和开发者需要组合并设定各个动画的时间，让它们显现出一种连贯的视觉效果。这种思考方式和我们前面所介绍的动画编排是同一种方式。
如果你足够仔细的话，你会发现，动画调试面板中动画详情窗格中显示的动画会根据开始时间（不包括延迟）预测相关动画，并将它们关排分组。
假设，你在一个运动对象（动画元素）上运用了多个动画：
@layer animation {
@keyframes translate {
from,
20%,
53%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
translate: 0 0 0;
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
translate: 0 -20px 0;
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
translate: 0 -10px 0;
}
80% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
translate: 0 0 0;
}
90% {
translate: 0 -4px 0;
}
}
@keyframes scale {
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
scale: 1 1.1;
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
scale: 1 1.05;
}
80% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
scale: 1 0.95;
}
90% {
scale: 1 1.02;
}
}
.animation {
color: var(--btn-color, #000);
background: var(--btn-bg);
transform-origin: center bottom;
&:hover {
animation:
translate 1s cubic-bezier(0.77, 0, 0.175, 1),
scale 1s cubic-bezier(0.77, 0, 0.175, 1);
}
}
}我所前面示例中的 bounce 动画拆分为 translate 和 scale 两个动画，并且同样应用于按钮的悬浮状态上，最终所取得的效果是一样的：
打开动画调试面板，并且将鼠标悬浮到按钮上触发动画，动画调试面板将会捕获到应用于按钮上的动画组：
捕获动画组后，在概览窗格中点击动画组缩略图就会在详细信息窗格中显示该动画组的详情，每个动画都有自己的行。
正如你所看到的，元素 .animation 应用了 translate 和 scale 两个动画。在“详细信息”的窗格中，分为两列，第一列呈现的是动画应用于哪具元素上，第二列呈现的是相应元素应用的动画（它会有由不同形状图形和动画名组成）。每个动画都是独立的一行，它会包括第一列（应用动画的元素）和第二列（元素应用的动画）。
当你在同一个动画组中有多个元素应用了不同的动画时，在动画调试面板中，将鼠标悬浮在相应的动画元素上，浏览器在视口中突出显示该动画。点击动画，在元素面板中将其选中。
如上图所示，当你在动画调试面板的“详细信息”窗格中，将鼠标悬浮在 div.down 上时，在视窗中会突出该动画，点击它时，元素面板（Elements）中 <div class="down"></div> 会高亮显示。
如果你的动画设置了无限循环播放（animation-iteration-count:infinite），动画调试面板中会会显示其定义和迭代。
如上图所示，.down 元素所应用的 bounce 动画，被设定为无限循环播放：
.down {
animation:
fadeInDown 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.3s both,
bounce 1s cubic-bezier(0.19, 1, 0.22, 1) 0.8s both infinite;
}“详情信息”窗格中 div.down 所对应的 bounce 动画，最左则高亮的草绿色所对应的部分，表示该动画的定义，而后面较淡的草绿色部分则表示 bounce 动画的迭代：
如果多个元素应用了同一个动画，动画调试面板的“详细信息”窗格中会为这些元素分配相同的颜色（颜色本身是随机的，没有任何意义）。例如下图中的 div.playing 、div.slogan 、div.download 和 div.down 元素都应用了同一个动画 fadeInDown ；div.home 、div.off 和 h1.logo 都应用了 fadeInUp 动画；div.notes 和 div.qrcode 都应用了 fadeInRight 动画：
在动画调试面板中除了查看动画的详细信息之外，我们还可以通过动画调试面板以不同的方式来重放动画。
第一种方式是在动画调试面板的“控制措施”窗体中，可以选择不同的播放速度，例如 100% 、25% （放慢四倍速度）和 10% （放慢十倍速度）:
第二种方式是，在“概览”窗体中，将鼠标悬浮在相应的动画组（已捕获）缩略图上，可以对应动画的播放：
第三种方式是在“时间轴”窗体中，拖动进度条指针（红色竖线）以拖拽视口动画，或点击时间轴上的任意位置，将进度条指针定位到特定点。如果动画已在播放，则继续播放，否则停止。
修改动画
通过上一节内容的学习，我想你对动画调试面板有了更进一步的认识，而且也知道如何通过它来检查（查看）动画。接着我们来看“动画调试”面板的另一个功能，就是修改动画。
通常情况之下，我们可以通过“动画调试”面板来修改动画的持续时间、延迟时间和关键帧时间。
假设我们给 .animation 元素同时应用了 heartBeat 和 swing 两个动画：
@layer animation {
@keyframes heartBeat {
0% {
scale: 1;
}
14% {
scale: 1.3;
}
28% {
scale: 1;
}
42% {
scale: 1.3;
}
70% {
scale: 1;
}
}
@keyframes swing {
20% {
rotate:0 0 1 15deg;
}
40% {
rotate:0 0 1 -10deg;
}
60% {
rotate:0 0 1 5deg;
}
80% {
rotate:0 0 1 -5deg;
}
to {
rotate:0 0 1 0deg;
}
}
.animation {
transform-origin: top center;
animation: heartBeat 1.3s ease-in-out,swing 1s ease-in-out;
}
}打开动画调试面板，你将看到应用于 .animation 元素的 heartBeat 和 swing 两个动画在“详细信息”窗格中会像下图这样：
假设你想调整某个动画的持续时间，你可以拖动该动画最后一个圆圈。例如，在上面这个示例中，如果你希望将 heartBeat 动画的持续时间调整到与 swing 动画一样，那么你可以在动画调试面板“详细信息”窗格中拖动 heartBeat 动画的最后一个圆圈，并且拖动到与 swing 动画的最后一个圆圈平齐：
不难发现，操作完之后，调试工具的样式（Styles）面板中的样式规则会发生相应的变化，调整后的样式会覆盖实始样式：
如果你觉得调整后的效果就是你期望的效果，那么你可以将最新样式从开发者工具中复制下来，并粘贴到你的样式表中覆盖之前的样式。如此一来，你将就调整后的动画应用到了元素上。
其实，你也可以拖动动画的第一个圆圈来调整动画的持续时间，但这种方式会为动画添加一个延迟时间。因此，要是你只想调整动画的持续时间，我更建议你插动动画的最后一个圆圈。
接下来，我们来看如何修改动画的持续时间。你可能已经猜到了，在动画调试面板中的“详细信息”窗格中，你可以像修改动画的持续时间那样来修改动画的延迟时间。不同的是，不是拖动动画最后一个圆圈，而是拖动动画的第一个圆圈。例如，假设你希望 heartBeat 延迟 .5s 之后再开始播放，那么可以拖动 div.animation 所对应的 heartBeat 动画的第一个圆圈到时间轴的 .5s 处：
还有一种方式，你可以直接拖动动画本身，并且使动画的第一个圆圈到达指定位置：
不管是哪种方式，它都会调整对应动画的持续时间。你会发现，在动画调试面板的“详细信息”窗格中，拖动动画第一个圆圈或者将整个动画向时间轴右侧拖动，所对应的动画之前会增加一段虚线，这段虚线所对应的长度就是该动画的持续时间。同样的，调试工具的样式（Styles）面板中同样会在对应的样式中新增动画持续时间。
需要知道的是，不管是拖动动画第一个圆圈还是拖动整个动画，动画的持续时间不会因为新增了动画持续时间而变短。如果你希望在新增了动画延迟时间，而相应的减少动画持续时间，那么你需要再次拖动动画的最后一个圆圈，减少与新增动画持续时间一样的长度：
如果将这两个功能结合在一起，它就类似于《深入了解 CSS 动画持续时间和延迟时间》中所介绍的动画编排：
@layer animation {
@keyframes fadeInUp {
from {
translate: 0 100px;
opacity: 0;
}
to {
translate: 0 0;
opacity: 1;
}
}
@keyframes zoomIn {
from {
scale: .7;
opacity: 0;
}
to {
scale: 1;
opacity: 1;
}
}
:root {
/* 持续时间 */
--heading-duration: 1.1s;
--subheading-duration: .9s;
--button-duration: .9s;
/* 延迟时间 */
--heading-delay: 0s;
--subheading-delay: calc(var(--heading-delay) + var(--heading-duration));
--button-delay: calc(var(--subheading-delay) + var(--subheading-duration));
}
header {
& h1 {
animation: fadeInUp var(--heading-duration) cubic-bezier(.19,1,.22,1) var(--heading-delay) both;
}
& h4 {
animation: fadeInUp var(--subheading-duration) cubic-bezier(.19,1,.22,1) var(--subheading-delay) both ;
}
& button {
animation: zoomIn var(--button-duration) cubic-bezier(.19,1,.22,1) var(--button-delay) both;
}
}
}假设你发现它们（动画）之间的一致性不太协调时，我们就可以通过动画调试面板来调整动画的持续时间或（和）延迟时间，直到它们令你满意为止。例如上面这个示例，你现在看到的效果是一个接一个元素出现，h1 最早出现，等 h1 元素上的动画执行完之后 h4 才出现，然后按类似方式 button 才出现。假设你或你的设计师并不希望它们之间按这样的顺序出现，希望在每个元素上的动画即将结束（快要结束）时就让下一个元素的动画开始执行，那么我们就可以在调试工具上调整它们的延迟时间：
正如上图所示，我们在调度工具中调整了 h4 和 button 元素所对应的动画的延迟时间。调整之后，你将获得动画相应的持续时间和延迟时间：
h4 {
animation-duration: 900ms;
animation-delay: 1003.4862518310547ms;
}
button {
animation-duration: 900ms;
animation-delay: 1797.7178382873535ms;
}注意，上面所展示的只是调整方式，具体调整应该根据实际需求进行。另外，这个调整过程是一个不断反复的过程，只有不断反复调整，才能达到最终令你满意的效果，尤其是在较为复杂的情境中。
特别声明，上面我们所展示的都是关于 CSS 关键帧动画的持续时间和延迟时间的调试，其实，我们也可以按相似的方法来调整 CSS 过渡动画的持续时间和延迟时间：
在动画调试面板的“详细信息”窗格中，除了修改动画的持续时间和延迟时间之外，还可以修改关键帧的时间。例如，你在元素上应用了下面这个关键帧动画：
@keyframes heartBeat {
0% {
scale: 1;
}
14% {
scale: 1.3;
}
28% {
scale: 1;
}
42% {
scale: 1.3;
}
70% {
scale: 1;
}
}
.animation {
animation: heartBeat 1s ease-in-out;
}CSS 关键帧动画与 CSS 过渡动画最大的差异之一就是 CSS 关键帧动画是由 @keyframes 来定义的。在动画调试面板的“详细信息”窗格中，如果动画定义了任何关键帧，那么这些规则会以白色内圈表示：
注意，在“详细信息”窗格中，关键帧的 0% （或 from）和 100% （to）会以实心圆点表示。
有一点是大家需要知道的，CSS 的 @keyframes 中的百分比选择器，它是相对于动画持续时间计算的。这意味着，@keyframes 中的百分比相对于动画调试面板中的“时间轴”计算：
换句话说，我们在动画调试面板的“详细信息”窗体中，拖动动画中的白色内圈时，可以改变关键帧的时间。
遗憾的是，在动画调试面板修改了关键帧的时间，但在对应的样式面板（Styles）中并不会相应的调整 @keyframes 所对应的百分比选择器。到目前为止来说，这个修改还是比较鸡肋的。
现在，你应该知道如何借助 Chrome 浏览器调试工具来调试 CSS 动画了。虽然这些都是调试动画的最基本技能，但是你一旦面临动画调试时，这些基本技能能很好的帮助你。另外，就我个人而言，我还是比较喜欢 Chrome 浏览器的动画调试工具，相比其他几个现代浏览器，Chrome 浏览器的动画调试工具功能更全，而且更灵活，比较适合于 Web 开发者。
调试动画的其他工具
除了使用现代浏览器自带的调试工具来调试动画之外，我们还可以借助浏览器插件来调试动画。这里我推荐一款 @motiondotdev 提供的 Chrome 浏览器插件 Motion DevTools ：
Motion DevTools：https://motion.dev/
安装完该插件之后，Chrome 浏览器的 Web 开发者调试工具就会新增一个 “Motion” 选项，它有点类似于动画调试（Animations）调试工具：
Motion 调试工具和 Chrome 浏览器自带的动画（Animations）调试工具有点类似，它也可以录制元素的动画，同样可以调整动画的持续时间、延迟时间等。除此之外，Motion 调试工具还可以调整 @keyframes 中的缓动函数，也可以调整相应属性的值，并且还可以将调整之后的 CSS 代码导出来。这几个方面的功能要比 Chrome 自带的动画调试工具更强。
如果你经常需要开发 Web 动画，那么 Motion 调试工具是必不可少的，很多时候它能更好的帮助你调试动画，并且获得调试之后的代码。如果你感兴趣的话，**Motion 官网**提供了详细文档，你可以从中获得操作 Motion 的技能。
其它动画的调试
现如今，CSS 中除了可以使用 transition 和 animation 来制作动画之外，现代 CSS 中还提供了 scroll() 、view() 、scroll-timeline 、view-timeline 等特性制作滚动驱动动效；还可以使用 ::view-transition 、::view-transition-group 、::view-transition-old 和 ::view-transition-new 等特性制作视图过渡动效。这些新特性能帮助我们构建更流畅，更引人入胜的动画效果。
那么我们来看看视图过渡动画和滚动驱动动画又应该如何来调试？
调试视图过渡
由于视图过渡是基于 CSS 动画构建的，因此 Chrome 开发者工具中的动画调试面板（Animations）非常适合用来调试 CSS 视图过渡动画：
使用动画面板，你可以暂停下一个动画，然后前后拖动动画。在此期间，你可以在“元素”面板中找到过渡伪元素。下面这个录屏会更清晰一些：
就我个人而言，目前在动画调试面板调试一些 CSS 过渡动画还是不太方便，比如我自己写的视图过渡动画，在动画面板中即使停止动画播放，但依旧会重新播放，这对于查看 CSS 视图过渡中的伪元素是不太方便，会对调试造成一定的困难。这个只能希望 Chrome 团队能进一步的优化该工具。
调试滚动驱动动效
到目前为止，浏览器的动画调试面板是无法对滚动驱动动效进行调试的，如果需要对滚动驱动动效进行调试，则需要使用 @bramus 提供的浏览器扩展插件 Scroll-Driven Animations Debugger 进行调试。该扩展插件会在 Chrome 浏览器的开发者工具的元素面板（Elements）中添加一个名为“Scroll-Driven Animations”的新窗格：
要使用它，像通常一样检查一个元素，并选择“Scroll-Driven Animations”窗格。选中后，你将看到被检查元素上添加的滚动驱动动效的可视化效果。该可视化效果是滚动器、动画元素的实时表示，并且在使用 ViewTimeline 时还会追踪主体。当你在文档中滚动时，可视化效果也会更新：
上图是一个滚动进度时间轴动画，下图是一个视图进度时间轴动画：
使用顶部工具栏在多个动画之间切换（如果有多个），或者设置可视化效果的缩放因子。通常情况下，你不需要设置缩放因子，因为可视化效果会自动适应可用空间。顶部工具栏还包括指示你正在处理哪种类型滚动时间轴的指示器，以及一些进度数字：总滚动进度、效果进度、实际滚动偏移量（以像素为单位）：
使用底部的“Edit Values”切换按钮，可以打开一个范围编辑器。一旦显示编辑器，可视化效果还会显示开始和结束范围的指示器。在 ScrollTimeline 的情况下，这是滚动器内容上的两条线。
在 ViewTimeline 的情况下，这是表示设置的动画范围值的两个框。使用下拉菜单和（或）输入更改值。请注意，输入框不会实时更新（目前不支持）；更改后，请点击输入框外的某处以更新值。
要了解此工具的更多详细信息，请查看Chrome Web Store页面上的视频。不过，请注意，我们无法通过 iframes 访问此工具，因此如果我们想在 CodePen 中测试它，我们必须在调试模式下进行。
有了这个插件之后，我们调试滚动驱动动效就变得容易得多了。也许在未来，我们可以直接在浏览器的开发者工具中拥有该扩展插件的功能，这样就可以消除一些插件的限制。
调整动画的缓动函数
对于一个 Web 动画来说，缓动函数可以说是其灵魂之一，缓动函数应用得是否妥当，直接会影响动画的最终效果。记得在介绍 cubic-bezier() 函数和 linear() 函数时提到使用可视化工具来创建所需的缓动函数，例如：
其实，浏览器开发者工具的样式面板（Styles）中也可以调整动画的缓动函数：
除了在这里可以选择预置的缓动函数之外，还可以像 cubic-bezier.com 一样调整 cubic-bezier() 函数。
你还可以选择 linear() 函数，通过点击曲线并在曲线上拖动轻松更新曲线。只需左键单击即可添加额外的点，双击可将其移除，左侧还有一些预设值可供使用。
这个调试功能对于微调动画并找到合适的效果，这非常有用。
动画性能调试
前面我们主要围绕着如何通过浏览器的开发者工具来调试动画的效果，例如动画的持续时间、延迟时间、关键帧时间和缓动函数等。除此之外，还有重要的一块，就是通过开发者工具来优化动画的性能，使得动画更加流畅。
正如《制作流畅动画的技巧和实践》一节课所提到的，动画的性能对于动画的流畅度是很关键的。庆幸的是，现代浏览器的开发者工具同样提供了很多用于识别动画性能问题的工具，这些工具有助于帮助我们更好的调试和优化动画的性能。这里简单的介绍一下这些工具。
FPS 计量器
要优化动画性能，首先要启用 FPS 计量器。在浏览器开发者工具中，按下 Command+Shift+P（macOS）或Control+Shift+P（Windows、Linux）以打开命令菜单。并在命令菜单中开始输入"Rendering"，然后选择"Show Rendering"。再选择 FPS （Frame Rendering Stats）计量器复选框。
这样一来，页面左上角会提供页面运行时 FPS 的实时估算。在你的计算机上，动画可能以60FPS 的流畅度运行，但在性能较弱的设备上会是什么样子呢？
性能面板
众所周知，Web 开发者调试或优化性能基本上都是在浏览器开发者工具中的性能（Performance）窗格中进行。性能窗格是一个信息宝库，它可以模拟低端设备，例如选择六倍减速的 CUP，那么开发者工具会减缓你的 CUP，使其比平常慢六倍。
注意：根据你使用的设备，即使六倍减速可能仍然很快，但你可以自定义此演示，以确保它对你的计算机造成了压力。
如果你的帧率较低或不流畅，性能面板（Performance）可以帮助你识别瓶颈。在性能面板中按 Command+Shift+E开始分析并重新加载页面。
注意：在测量性能时，请在隐身模式或访客模式下打开 Chrome。这些模式确保 Chrome 在干净的状态下运行。例如，如果安装了很多扩展程序，这些扩展可能会在性能测量中产生噪音。
要识别性能瓶颈，请在性能面板的 Timeline 视图中查找长时间任务。它们用红旗标记，单击它们会在 Summary 选项卡中显示更多详细信息。
注意：动画性能可能受 JavaScript 的影响，因为样式、布局和绘制都发生在浏览器的主线程上，与 JavaScript 执行一起。如果主线程过于忙于运行 JavaScript，动画可能会变得缓慢和不流畅。与动画性能相关的任务是紫色的（样式和布局）和绿色的（绘制和合成）。
绘制闪烁
Chrome 浏览器的开发者工具还配备了一个很棒的功能，用于可视化绘制过程，以帮助调试动画问题。你可以先在一个空白页（在地址栏中输入 about:blank），然后在开发者工具中启用 “Paint Flashing”（绘制闪烁）选项：
启用绘制闪烁后，当加载页面时，整个屏幕会闪烁成绿色，因为浏览器必须对所有内容进行绘制。在页在渲染完毕后，工作并没有结束，因为页面上的东西可能会发生变化。每次这些闪烁的动画都是浏览器绘制需要在屏幕上绘制的一部分，用绿色框表示：
布局和重新绘制在性能方面是昂贵的，可能会导致页面变慢。如果启用了绘制闪烁并且看到整个屏幕闪烁为绿色，或者屏幕上的某些区域不应该被绘制，那么你应该进一步深入挖掘。
图层面板
你可以在图层（Layers）面板中以 3D 形式查看页面的图层：
你可以缩放、旋转和拖动图层模型以探索其内容。悬停在图层上会显示其在页面上的当前位置。当你选择一个图层时，详情（Details）面板会显示其内存消耗和合成的原因。保持图层数量相对较低，并注意内存消耗较大的图层。
有关于这方面更详细的介绍可以阅读 Chrome 团队的博客《分析运行时性能》和《制作流畅动画的技巧和实践》。
小结
确保动画效果良好远不止于创建它。通常，通过编辑、优化和调试，项目才能从简单的运动变成一个精心设计且性能良好的作品。希望这些建议能为你提供更多的工具，使你的工作流程更加流畅，解决一些问题。