Animation Inspector 让你完全掌控网页上运行的每一个 CSS animation 与 transition。一键暂停所有动画、逐帧慢速检查、加速测试性能，或手动拖拽时间线——全部在单一浮动面板中完成，无需打开浏览器 DevTools。
CSS 动画调试历来令人头疼：它们速度快、相互叠加，而浏览器 DevTools 又需要你在计算样式中逐条查找动画属性。Animation Inspector 通过自动检测页面上所有 @keyframes 动画和 CSS transition，将它们以完整配置（duration、easing、delay、iteration count）列出，并提供全局或单个动画的播放控制，从根本上解决了这一问题。无论是调试抖动的 hover 效果、精细调整页面入场序列的时序，还是研究复杂动画库的底层实现，这个工具都能让你掌控全局。
一键立即冻结页面上的所有动画。所有动画在当前位置暂停，而非重置到起始状态。点击播放后从暂停处精确恢复。这对于检查肉眼无法捕捉的动画中间状态至关重要。
同时调整所有动画的播放速度，可选 0.25x（四分之一速）、0.5x、1x（正常）、2x 或 4x。以 0.25x 运行时，即便最快的 200ms transition 也能轻松观察和调试。
页面上所有 CSS animation 和 transition 均被自动检测并显示在可滚动列表中。每条记录显示动画名称（或 transition 属性）、duration、timing function（ease、linear、cubic-bezier）、delay、iteration count 以及当前运行状态。
拖动时间线滑块，逐帧手动推进动画。可精确查看动画周期中 25%、50% 或任意时间点的状态，拖动时页面实时更新。
对单个动画独立进行暂停、播放或速度调整。隔离某个动画单独调试，不受页面上其他运动元素的干扰。
点击列表中的任意动画，查看其完整 CSS 声明——@keyframes 定义、animation 简写拆解、计算后的起始与结束状态，以及应用该动画的元素。
动画检查器 covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskew将动画减慢至 0.25x，精确定位卡顿或抖动发生的位置。检查问题是否由布局抖动（animating width/height 而非 transform）、错误的 easing 或同一元素上的冲突动画造成。
使用时间线拖拽查看 cubic-bezier easing 曲线在实际中的表现。在特定百分比处比较 ease-in 与 ease-out 的行为差异。反复调整数值并重播，直到动感觉合适为止。
访问拥有出色动画的网站（落地页、作品集等），精确检查其实现方式。查看 @keyframes 定义、timing 数值以及元素定向方式，了解复杂序列的运作机制。
验证 hover 效果、加载动画、骨架屏和页面过渡是否均正常运行。暂停在中间状态，检查视觉故障，如元素重叠、动画过程中 z-index 错误或内容回流。
识别可能对前庭障碍用户造成问题的动画。通过暂停所有动画并确认页面是否仍完全可用，检查 prefers-reduced-motion 是否被正确响应。
打开 DevSuite Pro 浮动工具栏，点击 Animation Inspector 图标。工具立即扫描页面，检测所有正在运行的 CSS animation 和 transition。
浮动面板弹出，列出页面上检测到的所有动画。每条记录显示动画名称、duration、easing function，以及当前是运行还是暂停状态。徽章数字显示检测到的动画总数。
点击全局暂停按钮，同时冻结所有动画。元素保持在当前动画中间状态，便于检查 CSS 属性、截图或比较位置。
使用速度选择器将动画减慢至 0.25x 以便细致观察，或加速至 4x 快速循环浏览长时间动画。速度变更即时生效，无需重新启动。
左右拖动时间线滑块，手动逐步推进动画。页面实时更新，精确展示每帧的外观。非常适合发现动画故障或验证 easing 曲线。