Chrome DevTools Animations面板需F12或Cmd+Option+I打开后切换至Animations标签，仅显示运行中或可播放的CSS动画/过渡；暂停、慢放、逐帧通过面板控件操作；修改animation-duration需手动暂停重播或强制元素状态才生效。
Chrome DevTools 的 Animations 面板怎么打开
直接按 F12 或 Cmd+Option+I（macOS）打开开发者工具后，点顶部标签栏的 Animations（动画）面板即可。如果没看到，说明当前 Chrome 版本较旧（需 ≥ 98），或页面没触发任何 CSS 动画/过渡——它只显示正在运行或可播放的 @keyframes 和 transition，静态声明不会出现。
常见误操作：在 Elements 面板里改了 animation 属性但没刷新预览，导致面板空白。此时可手动触发重绘，比如切换元素的 display 或加个临时 class。
如何暂停、慢放和逐帧查看 CSS 动画
Animations 面板左侧列出所有活跃动画，每条右侧有三个控件：Play/Pause、Slow down（减速按钮，最高 10×）、Scrub timeline（拖动时间轴）。点击动画条本身可暂停；拖动时间轴滑块能停在任意毫秒点，配合 Elements 面板实时看 DOM 样式变化。
- 减速模式下，
transform和opacity通常仍流畅，但left/top等触发布局的属性会明显卡顿——这是正常渲染机制，不代表动画写法有错 - 若拖动时间轴无响应，检查是否用了
animation-play-state: paused且未通过面板激活 - 多个嵌套动画（如父容器
rotate+ 子元素scale）会分别列出，但时间轴不同步——需各自拖动观察叠加效果
为什么修改 animation-duration 后预览没变化
DevTools 修改 animation-duration 后，已启动的动画不会自动重播。必须手动暂停再播放，或删掉当前动画声明（比如清空 animation 值），再重新输入完整值（含名称、时长、timing-function 等）才能生效。
立即学习“前端免费学习笔记（深入）”；
更可靠的做法是：在 Styles 面板中右键点击 animation 属性 → 选 Force element state → 勾选 :hover 或其他触发状态，模拟重新进入动画的上下文。
- 直接编辑
animation-delay通常即时生效，因为它是启动偏移，不影响正在进行的周期 - 用
animation-iteration-count: infinite时，修改duration后首次重播才体现新时长，之前循环仍按旧值跑完 - 若用 JS 动态添加 class 触发动画，DevTools 修改仅影响 CSS 规则，不干涉 JS 逻辑，需手动 toggle class 测试
有哪些真正好用的浏览器插件辅助动画调试
官方 DevTools 已覆盖大部分需求，但以下插件能补足特定场景：
-
CSS Peek：悬停在animation-name值上时，直接内联显示对应@keyframes定义，省去在Sources面板翻找文件的步骤 -
Animista（网页版更实用）：不是插件，但可生成带预览的动画代码片段，复制进 DevTools 的Console执行document.body.innerHTML += '...'快速验证组合效果 -
WhatFont类思路暂无成熟动画插件——别信标榜“一键优化 CSS 动画”的工具，它们多数只是封装了animation-timing-function曲线生成器，实际调试仍得靠 DevTools 时间轴
插件装太多反而干扰：比如某些“CSS 调试神器”会劫持 getComputedStyle，导致 Animations 面板读取不到真实动画状态。真要排查复杂交互动画，关掉所有非必要插件，只留 DevTools 是最稳的路径。
