Hover动画回退突兀的根源是退出时未走反向路径，解决关键是用animation-direction:alternate配合ease-in-out和animation-fill-mode:forwards实现平滑往返。
Hover 动画回退突兀，本质是离开时动画没走“反向路径”，而是直接跳回初始状态。解决关键不是只写 hover，而是让进入和退出都走同一套动画逻辑，靠 animation-direction: alternate 配合 ease-in-out 实现平滑往返。
用 alternate 让动画自动反向播放
默认 animation-direction: normal 每次 hover 都从头正向播放，移开时浏览器不自动“倒放”，而是瞬间重置样式 —— 这就是突兀的根源。设为 alternate 后，奇数次（如第一次 hover）正向播，偶数次（如移开后再次 hover）反向播；更重要的是，它让动画具备可逆性基础。
- 必须搭配
animation-fill-mode: forwards，否则移开瞬间样式会丢回初始值 - 动画需定义完整起止帧（
@keyframes中 0% 和 100% 都要明确），否则反向时无依据 - 示例：
animation: slideIn 0.3s ease-in-out infinite alternate;—— 注意这里用了infinite才能让alternate在反复 hover 中生效；但更推荐用animation-play-state控制启停（见下一条）
用 animation-play-state 替代单纯 hover 切换
更稳妥的做法是：动画始终在运行，只通过 play-state 控制暂停/播放。这样进退都走同一段动画，方向由 alternate 自动管理，不会断连。
- 基础写法：
.box { animation: fadeInOut 1.2s ease-in-out infinite alternate; animation-play-state: paused; }
.box:hover { animation-play-state: running; } - 动画定义中，0% 是初始态，100% 是 hover 态，
alternate确保移开时自然倒退回 0% - 避免用
animation: xxx 0.3s直接写在 hover 里 —— 那只是单次触发，无法保证退出轨迹
确保缓动函数真正作用于往返全程
ease-in-out 只有在动画连续播放（尤其配合 alternate）时才体现价值：它让加速和减速分别发生在动画两端。如果动画被中断或重置，缓动就失效。
立即学习“前端免费学习笔记（深入）”；
- 不要混用
transition和animation控制同一属性，容易冲突 - 若需不同进/退速度，可用两个独立动画（一个进、一个退），但需用 JS 或伪类控制时机，复杂度高，一般不推荐
- 调试技巧：临时把动画时长拉长到 2s，肉眼观察进出是否对称减速/加速
兼容性与兜底建议
老版本 Safari 对 animation-direction: alternate + forwards 组合支持不稳定，可加一层 transition 降级：
- 给元素设默认
transition: all 0.3s ease-in-out - hover 时仅改变 CSS 属性（如
transform: scale(1.1)），不依赖 animation - 现代项目优先用 animation 方案，transition 仅作渐进增强
