Chromium (Chrome/Edge/Opera): 打开命令菜单(Cmd+Shift+P 或 Ctrl+Shift+P)> 运行“显示动画”,然后按回车。这将打开动画抽屉。触发动画以在时间轴上记录它。动画抽屉分为4个部分, 控件:从这里,您可以清除所有当前捕获的动画组,或更改当前选定的动画组的速度。 概述:在此处选择一个动画组以在详细信息窗格中检查和修改它。 时间轴:从这里暂停和开始动画,或跳转到动画的特定点。 详细信息:检查和修改当前选定的动画组,如添加延迟或更改时序持续时间。 Firefox: 检查使用CSS动画的元素。从右侧边栏打开动画窗格。触发动画以在窗格中查看同步的时间轴。使用可拖动的小部件来浏览时间轴或跳转到特定点。您还可以更改播放速度并进行更多操作。 Safari: 打开devtools > 打开“时间轴”选项卡 > 确保在左侧面板中启用了“媒体和动画”。 现在重新加载页面或触发动画以在底部面板中查看时间轴。 更多信息: Can I DevTools Newsletter Official Docs YouTube视频
打开动画选项卡有两种方法: 自定义和控制 DevTools > 更多工具 > 动画。 通过按以下键之一打开命令菜单:在 macOS 上: Command + Option + C。在 Windows、Linux 或 ChromeOS 上: Control + Shift + C。然后开始输入“显示动画”,并选择相应的抽屉面板。 或者 阅读文章,希望找到好的解决方案: https://developer.chrome.com/docs/devtools/css/animations/