使用Chrome Devtools调试CSS动画

Question

在转换css动画中,是否可以查看或调试单个元素所采用的步骤？我正在使用Chrome Dev Tools,但我对它很陌生.我用Google搜索并从时间线上看到了一些东西,但我没有找到一步一步的东西.

我的动画从0%开始,然后变为100%,但似乎有50%左右的奇怪,尽管没有声明50%的步骤.这就是为什么我想看看发生了什么.

Answer 1

是的,这是可能的.

可以使用Chrome DevTools调试转场和CSS动画.只需单击此按钮:

然后,"动画"选项卡将在"控制台"面板中打开(Esc如果您关注了DevTools,则可以通过按下打开它- 只需单击DevTools即可将其聚焦):

Answer 2

在进行了一些研究后,使用Chrome DevTools看起来目前看起来不太可能.以下是我发现的一些随机信息:

• 截至2013年3月,Firefox的DevTools中没有这样的功能,尽管Mozilla开发者已经承认收到了此请求.
• 截至2013年11月,Chrome DevTools没有调试CSS动画渲染的工具.
• Chrome DevTools 确实支持逐步浏览HTML5画布动画.
• 使用Javascript无法逐步完成动画的过渡,因为" Javascript过渡的内部[不会]".
• 最后但并非最不重要的 - 在DevTools API中没有任何东西可以直接显示出来,表明支持调试CSS动画.

对于它的价值,这里有一些建议,虽然我没有测试过这些,但我对这个话题一无所知:

• 如果可能,通过更改元素的属性来暂停动画animation-play-state:

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

• 将动画拖出更长的时间跨度,以便过渡行为更加清晰.

• 还有使用<canvas>动画的选项(显然Chrome DevTools有更好的调试支持),如果它是执行诸如逐步动画之类的任务的关键任务.