动画结束后元素卡在最终帧，需手动重置transform、opacity、top等关键属性，或通过animationName设为none+offsetHeight强制重排再恢复动画。
animation结束后元素卡在最终帧，怎么让它回到初始状态
默认情况下，CSS animation 播放完会停留在最后一帧（由 animation-fill-mode 默认值 none 决定），即使你用 JS 切换 animation-name 也不会自动“重置”样式。这不是 bug，是规范行为——动画只控制中间过渡，不负责回退。
常见错误现象：
– 点击按钮触发动画，第二次点没反应；
– 动画播完后元素位置/透明度/缩放没恢复，导致后续动画错位；
– 用 element.style.animationName = '' 清空再赋新值，但样式残留。
- 必须显式重置关键属性（比如
transform、opacity、left），不能只依赖动画本身 -
animation-fill-mode: forwards会让结束帧“粘住”，此时清空animation-name不会撤销它，得手动覆盖 - 如果用 class 切换动画，确保初始状态 class 的样式优先级 ≥ 动画 keyframes 中的最终帧
用 animation-name 切换动画时如何强制重置
单纯改 animation-name 不会清除上一次动画留下的内联样式或 computed 样式影响。关键是“打断动画流”+“归零关键属性”。
- 先移除当前动画：设置
element.style.animationName = 'none' - 触发重排（reflow）：读一个布局相关属性，如
element.offsetHeight，让浏览器同步应用上一步 - 再设回目标动画名：
element.style.animationName = 'bounce' - 如果动画依赖 transform，建议在初始 class 中明确写
transform: none或具体初始值，避免和 keyframes 冲突
示例片段：
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('click', () => {
box.style.animationName = 'none';
box.offsetHeight; // 强制重排
box.style.animationName = 'shake';
});
用重绘（re-render）方式重置动画更可靠吗
所谓“重绘”通常指 DOM 重插、class 全量切换或使用 key 强制 React/Vue 重建节点。这确实能彻底清掉动画残留，但开销大，且容易引发意外 layout shift 或事件绑定丢失。
