本文介绍一种基于 javascript 状态管理的 css 动画控制方案，解决「悬停触发正向旋转（-8° → 0°），鼠标离开后平滑回弹（0° → -8°）」的需求，避免元素因样式重置而突兀跳回初始状态。
要实现「鼠标悬停时启动正向旋转动画、离开时自动播放反向回弹动画，且两段动画均需完整执行、不中断、不跳变」，仅靠纯 CSS 的 :hover + transition 或简单 animation 类切换是不够的——因为 CSS 无法感知动画是否正在运行，也无法在动画中途响应 hover 状态变化。必须引入 JavaScript 进行动画生命周期监控与状态协同判断。
✅ 核心思路：双状态驱动
我们维护两个独立但关联的状态：
- Hover 状态：通过 element.matches(‘:hover’) 实时检测（比 mouseenter/mouseleave 更可靠，尤其应对快速进出场景）；
- 动画状态：用 Map 映射每个元素到其当前动画阶段（backward / forward / rotatingForward / rotatingBackward）。
只有当「当前处于 forward 状态且不再 hover」时，才触发回弹；同理，「当前处于 backward 状态且开始 hover」才触发正向旋转。这样确保动画不会被覆盖或打断。
