当多个 CSS 类共用同一 @keyframes 名称但通过 animation-direction: reverse 实现“进出”效果时，浏览器会复用动画时间线而非重置播放进度，导致动画从非零时间点开始，造成视觉跳变或失效。
当多个 css 类共用同一 `@keyframes` 名称但通过 `animation-direction: reverse` 实现“进出”效果时，浏览器会复用动画时间线而非重置播放进度，导致动画从非零时间点开始，造成视觉跳变或失效。
在实际开发中，我们常试图“复用”一个关键帧动画（如 scale-easeInOutBounce）来同时实现“入场”和“退场”效果：只需为 .animation-in 设置 animation-direction: reverse，而 .animation-out 保持 normal，看似简洁高效。但正如你在 Chrome 中观察到的——动画突然“从中间开始”、缩放不完整、甚至完全无响应——这并非代码语法错误，而是浏览器对 动画实例生命周期 的底层处理机制所致。
? 根本原因：动画时间线未重置（Timeline Reuse, Not Restart）
CSS 动画不是“每次加类就新建一个动画实例”，而是基于 元素当前动画状态 进行合成更新。当你快速切换 .animation-in ↔ .animation-out 时：
- 元素已处于一个正在运行（或刚结束）的
scale-easeInOutBounce动画中； - 移除旧类、添加新类后，浏览器发现
animation-name未变（仍是scale-easeInOutBounce），且其他animation-*属性（如duration,fill-mode）也高度一致； -
于是它选择复用现有动画实例，仅更新
animation-direction，而保留当前播放时间（elapsed time）； - 结果：
.animation-out被应用时，动画可能已“播放了 3.2s”，于是直接从96% { scale(0) }跳到100%，几乎不可见；或因forwards+reverse组合导致初始 transform 状态冲突，触发回退逻辑。
✅ 正确理解：
animation-direction: reverse不是“倒播”，而是以相反顺序遍历同一时间轴上的关键帧。若时间轴未归零，反向播放起点 ≠ 动画起始状态。
✅ 可靠解决方案：强制动画重置
方案一：使用 requestAnimationFrame 延迟类切换（推荐）
利用 RAF 确保 DOM 更新发生在下一帧渲染前，打断动画连续性，触发浏览器创建新动画实例：
document.getElementById('toggleButton').addEventListener('click', function() {
const rect = document.getElementById('myRectangle');
if (rect.classList.contains('animation-in')) {
rect.classList.remove('animation-in');
requestAnimationFrame(() => {
rect.classList.add('animation-out');
});
} else {
rect.classList.remove('animation-out');
requestAnimationFrame(() => {
rect.classList.add('animation-in');
});
}
});
方案二：添加 animation-play-state: paused 过渡（更健壮）
在移除旧类后、添加新类前，先插入一个“暂停态”类，强制中断当前动画：
.animation-pause {
animation-play-state: paused !important;
}
// JS 中：
rect.classList.remove('animation-in', 'animation-out');
rect.classList.add('animation-pause'); // 触发暂停
requestAnimationFrame(() => {
rect.classList.remove('animation-pause');
rect.classList.add(isIn ? 'animation-out' : 'animation-in');
});
方案三（终极解耦）：语义化分离关键帧（最佳实践）
避免复用同一 @keyframes，为进出定义独立动画逻辑，彻底消除歧义：
@keyframes scale-in {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@keyframes scale-out {
0% { transform: scale(1); }
100% { transform: scale(0); }
}
.animation-in { animation-name: scale-in; }
.animation-out { animation-name: scale-out; }
✅ 优势：语义清晰、无状态残留、兼容性好、便于调试（DevTools 中可分别追踪）。
⚠️ 注意事项与性能提示
-
不要依赖
setTimeout(..., 0)：它无法保证在渲染帧边界执行，仍可能复用时间线； -
慎用
animation-fill-mode: forwards+reverse组合：forwards会保留100%帧样式，而reverse的100%实际对应原动画的0%，易引发 transform 冲突； -
iOS Safari / 微信内置浏览器需额外兼容：部分旧版本对
animation-direction: reverse支持不稳定，建议降级为双 keyframes 方案； -
性能优化：对
transform/opacity动画启用硬件加速，添加will-change: transform（仅在动画触发前设置，动画结束及时清除）。
总结
CSS 关键帧动画的“复用”表象下，是浏览器对动画时间线的智能复用策略——它提升性能，却牺牲了开发者直觉。真正的专业实践不是回避机制，而是主动管理动画生命周期：通过 RAF 打断、语义化拆分或显式暂停，让行为符合预期。记住：@keyframes 定义的是“动画蓝图”，而 animation-* 属性共同决定“如何执行这张蓝图”。掌控后者，才能写出稳定、可维护、跨端一致的动效系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
