如何实现悬停暂停动画并在鼠标离开后平滑恢复原状态

本文详解如何通过 javascript 精确控制 css 动画状态，实现元素在 hover 时从 -8° 旋转至 0°、鼠标离开后平滑返回 -8° 的无缝过渡效果，避免“跳变”或状态丢失。

要实现「悬停触发正向旋转 → 停留在目标角度 → 鼠标离开后平滑反向旋转回起始角度」这一行为，仅靠纯 css :hover + transition 或简单类名切换是不够的：transition 在鼠标移出瞬间会中断当前状态并立即插值回初始值，导致“突兀回弹”；而基于 animation 的类名切换又缺乏对动画生命周期的细粒度感知，容易因重复触发造成状态错乱。

✅ 正确解法是将动画控制权交还 javaScript，通过监听 animationstart/animationend 与 mouseenter/mouseleave 事件，构建双状态机（hover 状态 + 动画执行状态），确保：

• 动画一旦开始，必须完整播放完毕（animation-fill-mode: forwards 是关键）；
• 只有在动画真正结束且状态匹配时，才触发下一段动画；
• 多个元素可独立运行，互不干扰。

以下是完整、可直接复用的实现方案：

✅ 核心 javascript（推荐 es6+ 写法）

const ROTATE_FORWARD = 'rotate-forward'; const ROTATE_BACKWARD = 'rotate-backward';  // 四种互斥动画状态 const STATES = {   backward: 'backward',      // 已完成反向动画，静止于 -8deg   forward: 'forward',        // 已完成正向动画，静止于 0deg   rotatingForward: 'rotatingForward',   rotatingBackward: 'rotatingBackward' };  const elements = document.querySelectorAll('.polaroid'); const stateMap = new Map();  elements.forEach(el => {   stateMap.set(el, STATES.backward); // 初始状态为 backward    // 监听动画生命周期   el.addEventListener('animationstart', (e) => {     if (e.animationName === ROTATE_FORWARD)       stateMap.set(el, STATES.rotatingForward);     else if (e.animationName === ROTATE_BACKWARD)       stateMap.set(el, STATES.rotatingBackward);     updateState(el);   });    el.addEventListener('animationend', (e) => {     if (e.animationName === ROTATE_FORWARD)       stateMap.set(el, STATES.forward);     else if (e.animationName === ROTATE_BACKWARD)       stateMap.set(el, STATES.backward);     updateState(el);   });    // 监听交互   el.addEventListener('mouseenter', () => updateState(el));   el.addEventListener('mouseleave', () => updateState(el)); });  function updateState(el) {   const isHovered = el.matches(':hover');   const state = statemap.get(el);    // 状态决策表（核心逻辑）   if (state === STATES.forward && !isHovered) {     rotateBackward(el);   } else if (state === STATES.backward && isHovered) {     rotateForward(el);   } }  function rotateForward(el) {   el.style.animation = `${ROTATE_FORWARD} 2s forwards`; }  function rotateBackward(el) {   el.style.animation = `${ROTATE_BACKWARD} 2s forwards`; }

✅ 对应 CSS（精简无冗余）

.polaroid {   width: 280px;   height: 200px;   padding: 10px 15px 100px 15px;   border: 1px solid #bfbfbf;   border-radius: 2%;   background-color: white;   box-shadow: 10px 10px 5px #aaaaaa;   transform: rotate(-8deg); /* 初始角度 */   /* 移除所有 transition，交由 animation 控制 */ }  @keyframes rotate-forward {   from { transform: rotate(-8deg); }   to   { transform: rotate(0deg); } }  @keyframes rotate-backward {   from { transform: rotate(0deg); }   to   { transform: rotate(-8deg); } }

✅ html 结构（简洁语义化）

   
Just a basic explanation of the picture.
 
 
   
Second polaroid with same behavior.
 

⚠️ 关键注意事项

• forwards 不可省略：animation: name 2s forwards 中的 forwards 确保动画结束后样式保持在 to 关键帧状态（如 rotate(0deg)），否则动画一结束就会“闪回”初始值。
• 避免 transition 干扰：CSS 中务必移除所有 transform 相关的 transition，否则它会与 animation 冲突，导致不可预测的混合动画。
• 状态映射需唯一：使用 Map 而非全局变量或 data-* 属性，保证每个 .polaroid 元素拥有独立状态，支持无限扩展。
• 无需 !important 或内联 style 清理：本方案通过覆盖 style.animation 实现原子级控制，旧动画自动终止，无需手动 remove() 类名或清空 style。

✅ 效果验证要点

该方案兼顾健壮性、可维护性与性能——无定时器、无强制重排、无内存泄漏风险，是现代 Web 动画控制的推荐实践。