动画结束后Chrome DevTools中CSS内联动画样式消失，如何捕获？

1. 用DevTools断点暂停动画状态 #

• 打开Chrome开发者工具的Sources面板，展开左侧的Event Listener Breakpoints -> Animation，勾选animationstart或者animationend断点。触发动画时页面会自动暂停，此时就能在Elements面板看到还没消失的内联动画属性。
• 也可以直接在Elements面板选中目标元素，右键点击选择Break on -> Attribute modifications。当元素的style属性被修改（也就是动画属性要被移除时），页面会暂停，刚好能抓住属性消失前的状态。

2. 用控制台代码监听并记录属性 #

• 在Console面板运行以下代码，监听动画开始事件，直接打印或保存目标元素的动画属性：

// 替换成你的目标元素选择器，比如'.load-animate'
const targetEl = document.querySelector('你的元素选择器');
targetEl.addEventListener('animationstart', () => {
  const animStyles = getComputedStyle(targetEl);
  console.log('动画属性详情:', animStyles);
  // 把属性存到全局变量，方便后续查看
  window.targetAnimProps = animStyles;
});

• 如果页面有多个同类动画元素，用事件委托更方便：

document.addEventListener('animationstart', (e) => {
  if (e.target.matches('你的元素选择器')) {
    console.log('目标元素动画属性:', getComputedStyle(e.target));
  }
});

3. 禁用动画强制保留属性 #

• 通过Ctrl+Shift+P打开Chrome的命令菜单，搜索并打开Rendering面板，勾选Disable animations选项。这样所有动画都会被暂停，内联的animation-duration、animation-delay等属性就不会消失，可以从容查看。

内容的提问来源于stack exchange，提问作者Akhran