chrome devtools animation 面板空白或不响应，是因为它仅捕获处于 running 状态的动画实例；静态声明、paused、刚结束或纯 js/合成器加速的动画均不会显示，需主动触发并重启动画才能被捕获。
Chrome DevTools 的 Animation 面板本身没问题，问题几乎都出在“动画没真正跑起来”——它只捕获 running 状态的实例，静态声明、paused、刚结束或 JS 驱动的动画都不会显示。
为什么 Animation 面板空白或不响应
常见错误现象：Listening for animations... 一直挂着、悬停无高亮、时间轴空荡荡。根本不是面板坏了，而是它没收到任何可捕获的动画帧。
- 元素没绑定
animation或transition属性（哪怕写了@keyframes也没用） -
animation-play-state: paused且未手动设为running—— 面板无视“已定义但冻结”的动画 - 动画依赖
:hover或 class 切换，但你没触发交互；面板不会预判行为，只响应真实 DOM 状态变化 - 用了
transform+will-change却没配animation—— 这类纯 JS 或合成器加速行为不在捕获范围内 - Chrome 版本 Settings → Experiments → Enable Animations tab
让动画立刻出现在面板里的三步实操
关键不是刷新页面，而是“强制重播一次”，让 DevTools 捕获到新实例。
- 在
Elements面板选中目标元素 → 右键 →Force state→ 勾选:hover或:focus（适用于 transition 触发场景） - 在
Styles面板找到该元素的animation声明 → 全选删除 → 重新输入完整值，例如：spin 1.5s ease-in-out 0.3s infinite→ 回车（这会中断旧实例并新建一个） - 对 JS 控制的动画，在
Console执行：el.style.animation = 'none'; setTimeout(() => el.style.animation = 'fade-in 1s', 10);（延迟 10ms 是为避开渲染时机冲突）
改了 duration/delay 却没反应？别只改值
DevTools 中修改 animation-duration 或 animation-delay 后，已运行的动画不会自动重载参数——这是最常被忽略的逻辑断点。
- 必须先点击动画条目旁的
⏸️暂停，再点▶️重播，否则仍按旧参数跑 - 若动画由 class 控制（如
class="pulse"），改完参数后需手动移除再加回该 class 才能生效 - 直接在
Styles面板编辑时，删掉整行animation再重输，比单改某个子属性更可靠 - 拖动时间轴红标无效？确认动画当前是
running状态；paused下拖动会被忽略
Performance 面板里动画时间线对不上？录制方式错了
不是面板不准，是你录的数据没对齐动画真实生命周期。
- 别在动画静止时点录制：先 hover/addClass 触发动画，再按
Ctrl+Shift+P→ 输入Record→ 回车（左上角红色按钮默认不抓合成器帧） - 录制时长必须覆盖完整周期：例如
animation-duration: 1.2s; animation-delay: 0.3s，至少录 2s，否则看不到 delay 后首帧和循环衔接 - 检查 computed style 中最终生效的值：DevTools 显示的
duration是运行时计算结果，可能被媒体查询、内联样式或更高优先级规则覆盖 - 如果 FPS 轨道红条成片出现，先看是否用了
left/top等非合成属性——这类动画必然触发 layout/paint，卡顿是真实的，不是面板误报
真正卡住调试的，往往不是面板功能弱，而是没意识到它只响应“此刻正在跑”的动画实例。所有操作都要围绕“让动画重新启动一次”来设计，而不是等待面板自动发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
