动画结束后元素卡在最终帧，需手动重置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 或事件绑定丢失。
- DOM 重插（
parent.replaceChild(newEl, oldEl)）最彻底，但破坏节点引用和事件监听器 - 用
key触发框架重渲染适合列表项，但单个元素频繁 key 变化会导致性能抖动 - 更轻量的做法是加一个“reset”类，用
!important覆盖动画终态，再用setTimeout移除它并加动画类
例如：
.box.reset { transform: translateX(0) !important; opacity: 1 !important; }
.box.animate { animation: slideIn 0.3s; }
JS 中顺序执行：el.classList.add('reset'); → offsetHeight → el.classList.replace('reset', 'animate')
哪些属性必须手动归零才能真正“重置”
CSS 动画修改的属性不会自动还原，尤其以下几类极易被忽略：
-
transform：keyframes 里写了translateX(100px)，播完后getComputedStyle(el).transform是矩阵值，不是none -
opacity：动画设了opacity: 0结束，之后所有子元素都继承这个透明度，除非父级显式设回1 -
filter、clip-path、mask：这些高阶属性没有“默认值”概念，一旦被动画设置，就必须手动设回none或初始函数 - 定位属性（
top/left）：若元素是position: relative，动画改了top，播完后该值仍保留在 computed style 中
真正安全的重置，不是靠动画系统，而是靠你对关键属性的显式控制。哪怕用 @keyframes 写了完整循环，也要当它只是一次性作用力——别指望它替你擦屁股。
