Chrome DevTools 动画面板怎么不显示我的 CSS 动画？

东方熙然提问于 2026-03-11 08:37:20 阅读 14

工具

我在用 Chrome DevTools 调试一个页面，写了简单的 CSS 动画，但打开 Animations 面板后啥也没有，明明元素在动啊？

我试过刷新页面、重新触发动画，甚至把 animation-duration 改成 5s 了，还是看不到记录。是不是要加什么特殊属性才能被 DevTools 捕获？

@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}
.box {
  animation: slideIn 1s ease-in-out;
}

我来解答赞 4 收藏

反馈

1 条解答

Mr-冰可 Lv1

这个问题很常见，不是你的代码有问题，而是 Chrome Animations 面板的使用方式有点坑。

Animations 面板默认只记录打开面板之后发生的动画。如果你页面加载时动画就播放完了，等你再打开面板肯定啥也没有。

正确的做法是：

1. 先打开 DevTools，切换到 Animations 面板
2. 然后刷新页面，让动画重新播放

或者如果你的动画是通过 hover、click 这些交互触发的，就先打开面板，再去触发动画。

你试一下这个顺序，保准能看到记录。我之前也被这个问题卡过，后来才发现是操作顺序的问题。

另外提醒一下，你的动画默认只执行一次（没有设 infinite），所以刷新页面这个动作很重要。

2026-03-11 09:06