使用 Chrome Devtools 调试 CSS 动画

问题描述 投票:0回答:4

是否可以查看或调试单个元素在过渡 CSS 动画中所采取的步骤? 我正在使用 Chrome 开发工具,但我对此还很陌生。我用谷歌搜索并从时间线上看到了一些东西,但我没有找到一步一步的东西。

我的动画从 0% 开始,到 100%,但在 50% 附近似乎有些奇怪,尽管 50% 的步长没有声明。这就是为什么我想看看发生了什么。

css google-chrome debugging google-chrome-devtools transition
4个回答
33
投票

是的,这是可能的。

可以使用 Chrome DevTools 调试过渡和 CSS 动画。

enter image description here

然后,“动画”选项卡将在控制台面板中打开(如果您已聚焦 DevTools,则可以按 Esc 打开它 - 只需单击 DevTools 即可聚焦):

enter image description here


8
投票

经过一些研究,目前使用 Chrome DevTools 似乎无法实现这一点。 以下是我发现的一些随机信息:

  • 截至 2013 年 3 月,Firefox 的 DevTools 中不存在此类功能,尽管 Mozilla 开发人员已承认已收到对此的请求
  • 截至 2013 年 11 月,Chrome DevTools 还没有工具来调试 CSS 动画的渲染
  • Chrome DevTools
  • 支持逐步浏览HTML5 canvas动画。
  • 使用 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 具有更好的调试支持)。

    
    


2
投票
下载 Chrome Canary

以访问新的动画控件功能。 请观看此视频以预览其工作原理:

https://vimeo.com/116038639


1
投票
最后更新时间:2018 年 1 月 11 日。

Chrome DevTools 动画检查器

有两个主要用途。

检查动画。您想要放慢速度、重播或检查 动画组的源代码。
  1. 修改动画。您想要修改时间、延迟、 动画组的持续时间或关键帧偏移量。
  2. 贝塞尔曲线编辑 目前不支持关键帧编辑。
  3. 例如无法在关键帧中修改 CSS 2D 变换的缩放方法的值。尝试运行下面给出的代码片段:

.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

 目前不支持动画。

© www.soinside.com 2019 - 2024. All rights reserved.