本文介绍一种基于 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」才触发正向旋转。这样确保动画不会被覆盖或打断。
✅ 关键技术点说明
- animation-fill-mode: forwards：必须显式设置（代码中通过 style.animation = "... forwards" 实现），否则动画结束后元素会立即恢复原始 transform 值，造成“闪回”。
- 监听 animationstart 和 animationend：精准捕获动画启停时刻，及时更新状态映射。
- 直接操作 element.style.animation：比切换 class 更可控，旧动画会自动终止，新动画立即接管（无需手动 removeClass）。
✅ 完整可运行代码示例
Just a basic explanation of the picture.
Second polaroid with same behavior.
⚠️ 注意事项
- 不要使用 transition 混合 animation：二者机制不同，混合易导致行为不可控；
- 避免在 :hover 中直接写 transform：这会覆盖 animation 的 forwards 效果，造成跳变；
- 若需支持旧版 IE，请补充 -ms-transform 等前缀（现代项目通常可忽略）；
- 多个元素共用同一套逻辑？✅ querySelectorAll + forEach 已天然支持。
✅ 总结
该方案将「动画控制权」从 CSS 移交至 JS，通过精细化的状态协同，实现了真正符合直觉的悬停交互体验：动画不中断、不跳帧、不重置，进退皆从容。适用于 Polaroid 相框、卡片翻转、图标悬停动效等需要精确时序控制的 UI 场景。
