17370845950

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 仅作渐进增强