本文介绍一种通过 javascript 精确控制 css 动画状态的方法，解决悬停触发旋转动画、离开后平滑回退至初始角度的问题，避免“跳变”或状态丢失。
在纯 CSS 中，:hover 触发的 transition 或 animation 很难实现「悬停即启动、离开即回退，且动画不中断、不重置」的效果——尤其当用户快速进出元素时，transition 易因状态覆盖而跳回起始值，animation 则缺乏对播放进度与方向的细粒度控制。
理想行为应是：
- 鼠标进入 → 启动「-8° → 0°」正向旋转动画（若尚未完成）；
- 鼠标离开 → 启动「0° → -8°」反向旋转动画（仅当当前已停在 0° 时）；
- 动画必须完全播放完毕才允许切换方向，杜绝中途打断导致的视觉撕裂；
- 每个元素独立维护自身动画状态，支持多个 .polaroid 实例共存。
为此，我们采用「状态机 + 事件监听」策略，核心在于分离并同步两个关键状态：
