本文详解如何通过 javascript 精确控制 css 动画状态，实现元素在 hover 时从 -8° 旋转至 0°、鼠标离开后平滑返回 -8° 的无缝过渡效果，避免“跳变”或状态丢失。
要实现「悬停触发正向旋转 → 停留在目标角度 → 鼠标离开后平滑反向旋转回起始角度」这一行为，仅靠纯 CSS :hover + transition 或简单类名切换是不够的：transition 在鼠标移出瞬间会中断当前状态并立即插值回初始值，导致“突兀回弹”；而基于 animation 的类名切换又缺乏对动画生命周期的细粒度感知，容易因重复触发造成状态错乱。
✅ 正确解法是将动画控制权交还 JavaScript，通过监听 animationstart/animationend 与 mouseenter/mouseleave 事件，构建双状态机（hover 状态 + 动画执行状态），确保：
- 动画一旦开始，必须完整播放完毕（animation-fill-mode: forwards 是关键）；
- 只有在动画真正结束且状态匹配时，才触发下一段动画；
- 多个元素可独立运行，互不干扰。
以下是完整、可直接复用的实现方案：
