本文详解如何通过 javascript 精确控制 css 动画状态，实现元素悬停时正向旋转至 0°、离开时反向旋转回 -8° 的无缝衔接效果，避免“跳变”或重置问题。
在纯 CSS 中，:hover 触发的 transition 或 animation 很难实现「悬停开始动画 → 离开时从当前帧继续反向播放」的效果——因为浏览器默认会在 :hover 状态结束时立即回退到初始样式（如 transform: rotate(-8deg)），造成视觉上的突兀“弹回”。要真正实现动画中途暂停、状态保持、离开后平滑续播反向动画，必须借助 JavaScript 主动管理动画生命周期与元素状态。
核心思路是：解耦 hover 状态与动画状态，用有限状态机（FSM）建模行为逻辑，并通过 animationstart/animationend 事件同步更新状态，再根据组合状态决定是否触发新动画。
✅ 正确的状态模型设计
我们定义两类状态：
- Hover 状态：true（鼠标在元素上）或 false（已离开）；
-
Animation 状态（4 种互斥值）：
- ‘backward’：动画未启动，停留在初始态（-8°）；
- ‘forward’：正向动画已完成，停留在目标态（0°）；
- ‘rotatingForward’：正在执行正向旋转（-8° → 0°）；
- ‘rotatingBackward’：正在执行反向旋转（0° → -8°）。
仅当状态满足特定组合时才触发新动画，例如：
