本文详解如何通过 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°）。
仅当状态满足特定组合时才触发新动画，例如：
- 当前是 'forward' 且 !hovered → 启动反向动画；
- 当前是 'backward' 且 hovered → 启动正向动画；
- 正在旋转中（rotating*）时，不响应 hover 变化，确保动画完整执行。
这种设计杜绝了动画叠加、中断重置或样式冲突。
✅ 完整可运行代码实现
<!-- HTML --> <div class="polaroid"> <p class="caption">Just a basic explanation of the picture.</p> </div> <div class="polaroid"> <p class="caption">Second polaroid with same behavior.</p> </div>
/* CSS */
.polaroid {
width: 280px;
height: 200px;
padding: 10px 15px 100px 15px;
border: 1px solid #bfbfbf;
border-radius: 2%;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
transform: rotate(-8deg); /* 初始倾斜 */
/* 关键：禁用 transition，完全交由 animation 控制 */
}
@keyframes rotate-forward {
from { transform: rotate(-8deg); }
to { transform: rotate(0deg); }
}
@keyframes rotate-backward {
from { transform: rotate(0deg); }
to { transform: rotate(-8deg); }
}// JavaScript
const ROTATE_FORWARD = 'rotate-forward';
const ROTATE_BACKWARD = 'rotate-backward';
const STATES = {
backward: 'backward',
forward: 'forward',
rotatingForward: 'rotatingForward',
rotatingBackward: 'rotatingBackward'
};
const elements = document.querySelectorAll('.polaroid');
const stateMap = new Map();
// 初始化每个元素状态为 'backward'
elements.forEach(el => stateMap.set(el, STATES.backward));
elements.forEach(el => {
// 监听动画事件，更新状态
el.addEventListener('animationstart', e => {
if (e.animationName === ROTATE_FORWARD) {
stateMap.set(el, STATES.rotatingForward);
} else if (e.animationName === ROTATE_BACKWARD) {
stateMap.set(el, STATES.rotatingBackward);
}
updateElementState(el);
});
el.addEventListener('animationend', e => {
if (e.animationName === ROTATE_FORWARD) {
stateMap.set(el, STATES.forward);
} else if (e.animationName === ROTATE_BACKWARD) {
stateMap.set(el, STATES.backward);
}
updateElementState(el);
});
// 监听 hover 交互
el.addEventListener('mouseenter', () => updateElementState(el));
el.addEventListener('mouseleave', () => updateElementState(el));
});
function updateElementState(el) {
const hovered = el.matches(':hover');
const state = stateMap.get(el);
if (state === STATES.forward && !hovered) {
// 已转到 0° 且鼠标离开 → 执行返回动画
el.style.animation = `${ROTATE_BACKWARD} 2s forwards`;
} else if (state === STATES.backward && hovered) {
// 在 -8° 且鼠标进入 → 执行正向动画
el.style.animation = `${ROTATE_FORWARD} 2s forwards`;
}
}⚠️ 关键注意事项
- animation-fill-mode: forwards 不可省略：它确保动画结束后样式保留在 to 关键帧（即 0° 或 -8°），否则动画一结束就会瞬间回退到 transform 初始值，导致“闪跳”。
- 禁用 transition 并统一使用 animation：避免 CSS transition 与 animation 混用引发的优先级冲突和不可预测行为。
- 使用 element.matches(':hover') 而非 mouseenter/mouseleave 判断当前 hover 状态：因为 mouseenter/mouseleave 是瞬时事件，而 matches(':hover') 能实时反映真实 CSS 状态（尤其在快速进出或嵌套元素场景下更鲁棒）。
- 避免 class 切换方式：原方案用 classList.add/remove 易导致多个动画类同时存在、互相覆盖。本方案直接操作 element.style.animation，确保旧动画被强制替换，逻辑更清晰可控。
- 性能友好：所有事件监听均委托到单个元素，无重复绑定；状态更新逻辑轻量，不触发重排（仅修改 animation 内联样式）。
✅ 总结
要实现「悬停启动动画 → 离开后反向续播」的丝滑体验，CSS alone 是不够的。必须引入 JavaScript 进行状态编排：
① 建立 hover + animation 的双维度状态机；
② 利用 animationstart/animationend 精确捕获动画阶段；
③ 以 forwards 填充模式锁定终态；
④ 通过内联 style.animation 替代 class 控制，保障原子性。
该模式可轻松扩展至其他属性（如 scale、opacity、translate）或多段动画序列，是构建专业级交互动画的可靠范式。
