爆炸动画第二次触发错位的根本原因是浏览器残留上一次动画结束后的transform、opacity等样式，且@keyframes未显式定义0%初始帧。解决需三步：设初始class重置样式；触发动画前用el.style.animation='none'加offsetHeight强制清缓存；@keyframes必须完整定义0%和100%帧，并配合animation-fill-mode: both确保首尾状态准确还原。
“Composer爆炸图”不是 CSS 标准术语，也没有对应 @keyframes 或原生动画机制——你实际想处理的，是用 CSS @keyframes 实现的「逐帧分解/爆炸效果」在多次触发后无法回到初始状态的问题。核心矛盾不在“爆炸图”，而在动画复位逻辑没写对。
为什么爆炸动画第二次触发就错位？
典型表现：第一次点击元素飞散正常，第二次点，有些碎片从半空中开始动，或者缩放值不是从 1 开始。根本原因不是关键帧写错了，而是浏览器把上一次动画结束后的 transform、opacity 等样式“粘住”了，新动画直接在此基础上叠加。
-
animation-fill-mode默认是none，但只要设过forwards或用 JS 动态加动画，computed style 就会残留最终帧值 - 如果你在
@keyframes里只写了100%的终态（比如transform: translate(200px) scale(0)），没显式声明0%的初始值，浏览器不会自动回退到元素原始transform - 多个碎片元素如果共用同一套
@keyframes名，但初始transform不同（比如有的带rotate(15deg)），动画复位时就会不一致
清理关键帧残留样式的三步实操
不要试图“清空关键帧”，关键帧规则本身是只读的。你要清理的是动画执行后留在元素上的内联计算样式。
- 给每个碎片元素加一个明确的初始 class，里面写死所有会被动画修改的属性，例如：
.fragment { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } - 触发动画前，先强制重置：
el.style.animation = 'none';el.offsetHeight;（这行触发同步 layout，清掉旧动画残留） - 再赋新动画：
el.style.animation = 'explode 0.6s ease-out forwards';
如何让爆炸后自动回归原始位置？
别依赖“动画倒播”或二次写 keyframes，容易卡顿且难对齐。直接用 animation-fill-mode: both + 完整定义首尾帧。
-
@keyframes explode必须同时写0%和100%，且0%要和你的初始 class 完全一致 - 还原动画单独写一个：
@keyframes collapse { from { transform: translate(200px, -80px) scale(0.7); opacity: 0.3; } to { transform: translate(0, 0) scale(1); opacity: 1; } } - 应用时用
animation-fill-mode: both，确保动画未开始前就按0%渲染，结束后按to回归
多碎片动画不同步？检查 animation-delay 和 duration 是否错开
爆炸图常靠微调每个碎片的 animation-delay 制造随机感，但若 duration 不统一，复位时间就无法对齐。
- 所有碎片必须用相同
animation-duration（比如都是0.6s），否则animation-fill-mode: forwards生效时间不一致 - 延迟用
animation-delay: calc(var(--i) * 0.08s)这类 CSS 变量控制，比硬写0.1s/0.18s更易维护 - 避免在 JS 中用
setTimeout分批触发——CSS 动画时间轴由浏览器统一调度，JS 延迟受主线程阻塞影响，极易偏移
真正难的不是写爆炸动画，而是让每个碎片都记得自己“从哪来”。关键帧只是剧本，而元素的初始状态才是演员的站位。漏写 0%、忽略 transform 的层叠行为、或指望浏览器自动回退——这些才是复位失败的根源。
