CSS动画切换animation-name会跳变，因其无状态迁移机制，新动画总从0%开始；应改用同一animation-name配合animation-play-state控制，或优先使用transition实现平滑过渡。
animation-name 切换时为什么动画会跳变
直接替换 animation-name 的值（比如从 fade-in 换成 slide-out），浏览器不会自动衔接两个动画的当前状态，而是立即中断旧动画、重置元素样式、再从头播放新动画——这就是跳变的根源。本质是 CSS 动画没有“状态迁移”机制，animation-name 只是触发器，不负责过渡逻辑。
- 常见错误现象：
opacity突然归零、transform回到初始位置、动画卡顿或闪烁 - 根本原因：CSS 动画本身不可中断继承；新动画从
0%关键帧开始，无视旧动画执行到哪一步 - 不是浏览器 Bug，是规范行为——W3C 明确规定 animation 重置时清空运行时状态
用 animation-play-state + 多关键帧规避强制重置
不靠切换 animation-name，改用同一动画名称，通过控制 animation-play-state 和动态更新 @keyframes 中不同阶段的样式，让一个动画覆盖多个状态。这样 DOM 元素的 transform、opacity 等属性始终被同一个 animation 驱动，无状态丢失。
- 适用场景：按钮悬停/点击/禁用态切换、卡片展开/收起/删除、表单步骤流转
- 关键技巧：把所有状态的关键帧写进同一个
@keyframes名称里，用百分比区间划分（如0%, 33%, 66%, 100%），再用 JS 控制animation-duration和animation-timing-function微调节奏 - 注意兼容性：
animation-play-state在 iOS Safari 15.4+ 才稳定支持暂停/恢复；老版本需降级为 class 切换 +transition
transition 比 animation-name 切换更适合多状态平滑过渡
如果目标只是视觉属性（opacity、transform、color 等）在几个离散状态间流动，transition 天然比反复切换 animation-name 更可靠。它基于属性当前值插值，无需预设关键帧，响应更自然。
- 典型误用：给
transition: all 0.3s后，靠 JS 改className触发动画——但all会包含无意变更的属性（如height、z-index），导致意外过渡 - 正确做法：显式声明要过渡的属性，例如
transition: opacity 0.2s, transform 0.25s ease-out - 性能影响：
transform和opacity触发 GPU 加速；避免对width、left、top做 transition，会频繁触发 layout
JavaScript 控制动画状态时必须手动清理
用 JS 切换 animation-name 或 class 时，若前一个动画还没结束就触发下一个，残留的 animationend 事件可能干扰后续逻辑，甚至造成样式残留（比如 transform 没还原）。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：监听
animationend后没移除监听器，多次切换后事件重复触发 - 实操建议：每次添加监听前先用
element.removeEventListener('animationend', handler)清理；或用once: true选项（注意 IE 不支持） - 更稳妥方式：用
getComputedStyle(element).animationName检查当前动画是否已切换完成，而非只依赖事件
animation-name 换得多快，而在状态切换时有没有保留上一帧的视觉上下文。多数情况下，用 transition + 显式属性控制，比折腾多个 @keyframes 更可控；真要用多动画，就得接受它不继承状态的事实，并用 JS 主动接管中间状态。 
