动画中断时状态“卡住”或“回弹”，是因为未定义@keyframes首尾帧且未设置animation-fill-mode；必须显式声明0%和100%关键帧、合理使用fill-mode（推荐both）、JS暂停时用getComputedStyle固化样式，并在新浏览器中用animation-composition避免冲突。
动画中断时元素状态“卡住”或“回弹”，是因为没定义 @keyframes 的首尾帧
CSS 动画被 animation-play-state: paused 暂停，或被新动画/样式覆盖时，浏览器不会自动保留当前视觉状态——它只记住最后应用的声明值。如果 @keyframes 里没写 0% 和 100%，浏览器会按层叠规则回退到 CSS 初始值（比如 transform: none），导致位置/缩放/透明度突变。
-
0%必须显式等于元素当前生效的初始样式（不是“默认值”，而是你实际设置的值） -
100%要和你想达成的最终状态严格一致，尤其注意单位（pxvsrem）、函数顺序（translateY(20px) rotate(10deg)≠rotate(10deg) translateY(20px)） - 避免依赖浏览器推断：哪怕初始状态是
opacity: 1，也要在0%明写opacity: 1
用 animation-fill-mode 控制中断后保持哪一帧
仅靠 @keyframes 不够，还要告诉动画“停了之后该听谁的”。animation-fill-mode 决定动画未运行时的样式来源：
-
none：动画不运行时完全忽略关键帧（最危险，默认值） -
forwards：动画结束后保持100%的样式（但对paused状态无效） -
backwards：动画开始前就应用0%样式（常用于避免闪屏） -
both：backwards+forwards组合，推荐用于需稳定中断态的场景
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.element {
animation: slideIn 0.4s ease-out both;
}
JavaScript 主动中断时，用 getComputedStyle 同步快照
当用 JS 调 element.style.animationPlayState = 'paused' 后，视觉可能仍滞后。更稳妥的做法是：暂停瞬间读取当前 transform、opacity 等，并固化为内联样式。
- 不能只读
transform，要读getComputedStyle(element).transform（返回矩阵字符串） - 对
opacity这类简单属性，可直接赋值：element.style.opacity = computed.opacity - 若动画含多个属性，建议用
element.animate()API 替代 CSS 动画，它提供commitStyles()方法直接固化当前帧
用 animation-composition 避免多动画叠加冲突（Chrome 115+ / Safari 17.4+）
当一个元素同时有 hover 动画、JS 触发动画、加载动画时，中断后状态混乱往往源于属性覆盖优先级打架。传统方案是加 !important 或重写所有关键帧，但现代可用：
立即学习“前端免费学习笔记（深入）”；
-
animation-composition: add：新动画与旧动画的属性值相加（适合位移叠加） -
animation-composition: accumulate：颜色、透明度等支持累加的属性合并计算 -
animation-composition: replace（默认）：直接覆盖，易丢状态
注意：必须配合 animation-name 显式命名动画，且各动画的同名属性需兼容累加规则（例如 transform: translateX(10px) 和 translateY(20px) 可 accumulate，但 translateX(10px) 和 scale(1.2) 不行）。
复杂交互动画里，“中断后状态异常”本质是状态管理权没交给开发者。显式定义关键帧、明确 fill-mode、必要时用 JS 快照、新浏览器用 composition——这几步做完，动画就不会再“自己做主”了。
