Kayce Basques
Sofia Emelianova
使用 Chrome 开发者工具的 Animations 抽屉式标签页检查和修改动画。
概览
如需捕获动画，请打开动画面板。它会自动检测动画并将其分组。
Animations 面板有两个主要用途：
- 检查动画。减慢、重放或检查动画组的源代码。
- 修改动画。修改动画组的时间、延迟时间、时长或关键帧偏移。不支持关键帧和贝塞尔曲线编辑。
动画面板支持 CSS 动画、CSS 转场效果、Web 动画和 View Transitions API。尚不支持 requestAnimationFrame 动画。
什么是动画组？
动画组是一组看起来彼此相关的动画。
目前，网络上还没有真正意义上的群组动画概念，因此动画设计师和开发者需要对各个动画进行编排和时间安排，使其呈现为一个连贯的视觉效果。Animations 面板会根据开始时间（不包括延迟时间）预测相关动画，并将其并排分组。
换句话说，动画面板会将在同一脚本块中触发的动画归为一组，但如果这些动画是异步的，则会归入不同的组。
打开“动画”面板
您可以通过以下两种方式打开动画面板：
- 依次选择
自定义和控制 DevTools > 更多工具 > 动画。