使用Chrome Devtools调试CSS动画

Question

是否有可能在转换-CSS动画中查看或调试单个元素所采取的步骤？我正在使用Chrome Dev Tools，但我对它还比较陌生。我谷歌搜索了一些内容，看到了时间轴上的某些东西，但我没有找到逐步进行的步骤。

我的动画从0%开始，到100%，但50%左右似乎有些奇怪，尽管没有声明50%这一步。这就是为什么我想查看发生了什么的原因。

- FredVDH

---

要是不问“给我看看谷歌浏览器的开发者工具”，而是问“这里有一个动画出现了故障，你知道为什么吗？”或许更能有效地解决问题 :) - user3913686

我很确定你们能够很快地解决这个问题，但是我想知道是否以及如何调试CSS动画，就像逐步调试一样，只是为了自己学习。这样我就可以解决自己的问题 :-) - FredVDH

授人以鱼不如授人以渔，一日之计非长久之计。;-) - FredVDH

这是给你的一句话 - “如果你为一个人生火，他会温暖一夜；但如果你放火烧一个人，他会永远保持温暖。” 重点是，如果我们现在能指出这个“错误”，你以后就不太可能再犯了！ :) - user3913686

呵呵，感谢你，但实际上我刚刚几分钟前自己找到了解决方案。这与一些中心重新计算（margin: auto）和元素的调整大小有关。因此，通过一点猜测、试错，我成功解决了问题。 不过如果我知道如何调试这些东西就更好了。如果有可能的话，我真的想知道...我自己没能找到... - FredVDH

Answer 1

是的，这是可能的。

使用Chrome DevTools可以调试转换和CSS动画。只需点击此按钮：

然后，在控制台面板中会打开一个“动画”选项卡（如果您已经将 DevTools 焦点放在上面，可以通过按 Esc 打开它 - 只需单击 DevTools 即可将其聚焦）：

- user3638471

---

真棒... :) 我不知道这个.. 它省了我很多时间。 - Dreamweaver

我发现由于某些原因，我的最新版本Chrome浏览器上不再有那个按钮了。我必须点击右上角的三个点图标，然后选择“更多工具”，再选择“动画”。 - MeltingDog

“Filter”部分的按钮似乎已被移除。但是您仍然可以在右上角的三个点菜单下找到它，方法是进入“更多工具”->“动画”。它也可以在“控制台”旁边的三个点菜单中作为“动画”找到。 - Stephen Ostermiller

Answer 2

经过一些研究，看起来目前使用Chrome DevTools无法实现此功能。以下是我发现的一些随机信息：

截至2013年3月，Firefox的开发工具中没有这样的功能，尽管Mozilla开发人员已经承认收到了此类请求。

截至2013年11月，Chrome DevTools没有工具用于调试CSS动画的渲染。

Chrome DevTools 支持逐帧查看HTML5画布动画。

不可能使用Javascript逐步执行动画的过渡效果，因为“转换的内部部分未被JavaScript公开”。

最后但并非最不重要的一点 - 在DevTools API中对于调试CSS动画的支持我并没有立刻看出来。

就我个人而言，以下是一些建议，尽管我没有测试过这些内容，并且对该主题相当无知：

• If possible, pause the animation by way of altering the element's animation-play-state property:

  .paused {
      -webkit-animation-play-state:paused;
      -moz-animation-play-state:paused;
      -o-animation-play-state:paused; 
      animation-play-state:paused;
  }
  

• Drag the animation out over a longer span of time so that the transition behavior is more clear.

• There's also the option of using <canvas> animations (which apparently Chrome DevTools has better debugging support for) if it's mission critical to do things like step through the animation.

- alex

Answer 3

点击下载 Chrome Canary，即可使用新的动画控制功能。观看以下视频以预览其工作原理：

https://vimeo.com/116038639

- ylerjen

---

这并不能让你减速，也没有暂停的捷径，它完全由鼠标驱动。我有一个动画故障，目前几乎不可能在没有精密计时/快捷方式的情况下进行调试！ - user3196599

附加的描述它如何工作的文本可以在http://valhead.com/2015/01/06/quick-tip-chrome-animation-controls/找到。此外，它现在是在常规Chrome版本43.0.2357.132中。 - Robin like the bird

Answer 4

最后更新于2018年1月11日。

Chrome DevTools动画检查器有两个主要目的。

1. 检查动画。您想要减速，重播或检查动画组的源代码。
2. 修改动画。您想要修改动画组的时间、延迟、持续时间或关键帧偏移量。 目前不支持贝塞尔编辑和关键帧编辑。

For e.g. It is not possible to modify the value of CSS 2D transforms' scale method in keyframe. Try running the snippet given below:

.animates {
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.wrapper {
  position: relative;
  margin-top: 10px;
}
.btn-overlay {
  animation-name:grow;
  -webkit-animation-name:grow;
  position: absolute;
  width: 50%;
  top: 0;
  left: 27%;
}
@keyframes grow {
  0%{
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    left: 27%;
  }
  80% {
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    left: 27%;
  } 
  90% {
    transform: scale(1.04);
    -moz-transform: scale(1.04);
    -webkit-transform: scale(1.04); 
    left: 27.5%;
  }
  100%{
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0); 
    left: 27%;
  } 
}
.button{
  background-color: #f49a22!important;/* Old browsers */
  background: -moz-linear-gradient(left, #efaf00 0%, #dd5c00 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #efaf00 0%,#dd5c00 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #efaf00 0%,#dd5c00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efaf00', endColorstr='#dd5c00',GradientType=1 ); /* IE6-9 */

  box-shadow: 0px 3px 6px rgba(156, 116, 86, 0.4);
  display: inline-block;
  color: white;
  padding: 0 14px;
  height: 30px;
  border-radius: 80px!important;
  font-size: 12px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="wrapper">
  <div class="animates btn-overlay">
    <input type="submit" value="SIGN UP HERE!" name="subscribe" class="button">
  </div>
</div>

</body>
</html>

动画检查器支持CSS动画、CSS过渡和Web动画。目前不支持requestAnimationFrame动画。

- Aung Myo Linn