本文介绍一种通过 javascript 精确控制 css 动画状态的方法，解决悬停触发旋转动画、离开后平滑回退至初始角度的问题，避免“跳变”或状态丢失。
在纯 css 中，:hover 触发的 transition 或 animation 很难实现「悬停即启动、离开即回退，且动画不中断、不重置」的效果——尤其当用户快速进出元素时，transition 易因状态覆盖而跳回起始值，animation 则缺乏对播放进度与方向的细粒度控制。
理想行为应是：
- 鼠标进入 → 启动「-8° → 0°」正向旋转动画（若尚未完成）；
- 鼠标离开 → 启动「0° → -8°」反向旋转动画（仅当当前已停在 0° 时）；
- 动画必须完全播放完毕才允许切换方向，杜绝中途打断导致的视觉撕裂；
- 每个元素独立维护自身动画状态，支持多个 .polaroid 实例共存。
为此，我们采用「状态机 + 事件监听」策略，核心在于分离并同步两个关键状态：
- Hover 状态：由 mouseenter / mouseleave 实时感知；
- 动画状态：通过 animationstart / animationend 事件结合 animationName 判断当前处于 forward（正向）、backward（反向）、rotatingForward 或 rotatingBackward 四种之一。
以下是完整可运行的实现方案：
✅ html 结构（简洁语义化）
Just a basic explanation of the picture.
Second polaroid with same behavior.
✅ 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); } }✅ javaScript 控制逻辑（状态驱动、高鲁棒性）
const ROTATE_FORWARD = 'rotate-forward'; const ROTATE_BACKWARD = 'rotate-backward'; // 四种互斥动画状态 const STATES = { backward: 'backward', forward: 'forward', rotatingForward: 'rotatingForward', rotatingBackward: 'rotatingBackward' }; const elements = document.querySelectorAll('.polaroid'); const stateMap = new Map(); // 初始化每个元素的状态为 'backward'（即静止在 -8°） elements.forEach(el => { stateMap.set(el, STATES.backward); }); // 监听所有关键事件 elements.forEach(el => { 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); } updateElementState(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); } updateElementState(el); }); el.addEventListener('mouseenter', () => updateElementState(el)); el.addEventListener('mouseleave', () => updateElementState(el)); }); function updateElementState(el) { const isHovered = el.matches(':hover'); const state = stateMap.get(el); // 状态决策表（核心逻辑） if (state === STATES.forward && !isHovered) { // 已转到 0° 且鼠标离开 → 启动回退 el.style.animation = `${ROTATE_BACKWARD} 2s forwards`; } else if (state === STATES.backward && isHovered) { // 静止在 -8° 且鼠标进入 → 启动正向 el.style.animation = `${ROTATE_FORWARD} 2s forwards`; } // 其他状态（如正在旋转中）不触发新动画，确保原子性 }⚠️ 关键注意事项
- animation-fill-mode: forwards 已通过内联样式 forwards 显式声明，确保动画结束后保留最终 transform 值（否则元素会瞬间跳回初始态）；
- 使用 el.matches(‘:hover’) 而非 onmouseover/onmouseout，规避事件冒泡与延迟触发问题；
- for…of 替代旧式 for 循环（避免 i
- 所有动画均通过 element.style.animation 直接设置，自动覆盖前序动画，无需手动 classlist.remove()；
- 若需兼容 IE，可在 @keyframes 中补全 -ms-transform，但建议优先保障现代浏览器体验。
此方案将动画控制权交还给 javascript，以清晰的状态流转替代脆弱的 CSS 伪类耦合，既满足设计需求，又具备良好的可扩展性（如后续增加暂停/重播按钮，只需新增对应状态分支即可）。