Chrome DevTools 动画面板为啥不显示我的 CSS 动画？

❤浩迪提问于 2026-03-31 14:48:13 阅读 3

工具

我在做一个按钮 hover 的缩放动画，但在 Chrome DevTools 的 Animations 面板里完全看不到任何动画记录，明明页面上有明显动效。我试过刷新、重新触发 hover，也确认打开了“Animation”工具面板，但就是空的。

这是我的 CSS 代码：

.btn {
  transition: transform 0.3s ease;
}
.btn:hover {
  transform: scale(1.1);
}

是不是只有 keyframes 才会被 DevTools 捕获？那 transition 做的动画就看不了了吗？

我来解答赞 3 收藏

反馈

1 条解答

仙仙 ☘︎ Lv1

你说得对，Chrome DevTools 的 Animations 面板确实只显示 keyframes 定义的 CSS 动画，transition 不会被记录。不过你可以在 Elements 面板里观察 transform 属性的变化来调试。

要是想在 Animations 面板里看到这个 hover 动画，可以改成用 @keyframes 写法。拿去改改：

.btn {

  animation: scaleAnimation 0s;

}

.btn:hover {

  animation: scaleAnimation 0.3s ease forwards;

}

@keyframes scaleAnimation {

  from {

    transform: scale(1);

  }

  to {

    transform: scale(1.1);

  }

}

这样写虽然麻烦点，但至少能在 Animations 面板里看到了。说实话这挺烦人的，希望 Chrome 后面能改进一下。

2026-03-31 15:07