chrome devtools animation面板空白主因是动画未真正运行：需确保chrome≥98、元素已绑定animation/transition、状态已变化或手动触发重绘；静态声明、已结束或被paused冻结的动画均不显示。
Chrome DevTools 的 Animation 面板能直接可视化 CSS 动画时间线，但前提是动画已触发且未被 animation-play-state: paused 或其他规则阻断；它不捕获未激活的 @keyframes 定义，也不支持 requestAnimationFrame 动画。
为什么点开 Animation 面板后什么都没显示
常见错误现象：面板空白、Overview 区域无缩略图、元素悬停无高亮边框。
- 页面尚未触发任何 CSS 动画或 transition —— Animation 面板只捕获“正在运行中”或“刚结束”的动画，静态定义不会自动出现
-
animation-play-state被设为paused且未手动播放 —— 即使动画已声明，面板也不会识别为“活动动画” - 使用了
transform+will-change但未配animation属性 —— 这类纯 JS 驱动或硬件加速行为不在捕获范围内 - Chrome 版本低于 92 或未启用实验功能 —— 某些旧版需在
Settings → Experiments → Enable Animations tab手动勾选
如何让目标动画出现在 Animation 面板里
关键不是“打开面板”，而是“让动画进入可捕获状态”。
- 在 Elements 面板中选中目标元素，手动在 Styles 面板里临时添加
animation-play-state: running（如果原本是paused） - 或者在 Console 中执行：
document.querySelector('.my-anim').style.animationPlayState = 'running' - 若动画依赖 hover，先用 Styles 面板的
:hov按钮强制激活:hover状态，再触发动画 - 对 transition 动画，需先修改触发它的属性（如
class切换或style.opacity变更），面板会在 transition 开始后 100ms 内捕获
时间轴上拖不动红标、参数改了没反应
这是最常被忽略的交互逻辑：Animation 面板的时间轴控制仅作用于“当前选中的动画条目”，且部分参数需配合播放状态生效。
- 红色垂直条（current time indicator）只能拖动的前提是动画处于
running状态；若为paused，拖动无效 -
Playback rate滑块调到 0.1x 后，必须点击 ▶️ 按钮才能以慢速重播 —— 单调速不自动播放 - 修改
Iteration count后需手动点击Replay，否则仍按原次数执行 - 调整
delay或duration时，若该动画由 CSS 类名控制（如class="fade-in"），改完后需先移除再重新添加该 class 才能重载新参数
关键帧偏移不准、时间轴和实际运动对不上
根本原因常出在 CSS 层面，而非面板本身 bug。
-
animation-timing-function设为cubic-bezier(0,0,0,0)这类非法值时，浏览器会 fallback 到ease，但面板仍按原值渲染时间轴 —— 建议用面板顶部的缓动函数下拉菜单重选标准值 - 多个
@keyframes同名定义（如来自不同 CSS 文件）会导致面板只显示最后一个，但实际运行可能混合 —— 在 Details 区点击keyframes链接，确认跳转到的是你预期的那个定义位置 - 父元素设置了
overflow: hidden且动画元素位移超出边界，视觉上“卡住”，但时间轴仍在跑 —— 面板无法感知裁剪，需结合 Layout 面板检查盒模型
真正难调试的从来不是时间轴长度，而是动画是否被层叠上下文截断、是否因 transform: none 覆盖导致关键帧失效、以及 animation-fill-mode 和 forwards 在 DOM 生命周期中的实际表现 —— 这些都得回到 Elements + Styles 面板交叉验证，Animation 面板只负责告诉你“时间线上发生了什么”，不解释“为什么发生”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
