animation-direction: reverse 不等于“原路退回”，它仅改变当前周期播放方向，不重置状态或接管上一动画终点；真正原路退回需配合 animation-play-state、fill-mode 或显式双向 keyframes。
animation-direction: reverse 不等于“原路退回”
很多人以为把 animation-direction 设成 reverse 就能让动画倒着走回起点，结果发现元素卡在中间、跳变、甚至方向没变——根本原因是：它只影响当前动画周期的播放方向，不重置动画状态，也不接管上一个动画的结束位置。
真正“原路退回”，得让浏览器知道“从哪退”“退到哪”。常见错误是直接改 animation-direction 却没同步调整 animation-play-state 或没触发重绘。
-
animation-direction: reverse必须配合animation-play-state: running才生效；设为paused后再切reverse，不会自动继续播放 - 如果动画本身用了
forwards填充模式，元素已停留在终点态，此时切reverse会从终点开始反向运行动画——但视觉上可能像“闪一下”，因为起始帧和当前样式不一致 - 想确保“严格原路退回”，推荐用
animation-direction: reverse+animation-fill-mode: backwards组合，强制以反向动画的第一帧为起点重绘
用 @keyframes 定义双向动画更可控
硬靠 CSS 属性切换方向容易失控，尤其涉及 transform、opacity 等复合变化时。最稳的方式，是在 @keyframes 里显式写出正向和反向两套关键帧，再通过 class 切换。
比如一个滑入滑出效果：
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(-100%); opacity: 0; }
}
- 正向用
slideIn，反向用slideOut，语义清晰，无歧义 - 两个动画 duration、timing-function 必须一致，否则“退回感”会断层
- 别省略
animation-fill-mode: forwards，否则滑出后元素会瞬间恢复初始状态，破坏连贯性
JavaScript 触发反向动画时，必须重置 animation-name
用 JS 控制动画方向时，光改 animation-direction 往往无效——浏览器会复用当前正在运行的动画实例，而不会重新计算关键帧路径。
正确做法是：先清空 animation-name，强制中断，再设回目标动画名（含方向）。
- 错误写法：
el.style.animationDirection = 'reverse'—— 大概率没反应 - 正确写法：
el.style.animationName = 'none'; setTimeout(() => { el.style.animationName = 'slideOut'; }, 0) - 用
getComputedStyle(el).animationName检查是否真的被重置，避免因 CSS 优先级或继承导致失效 - 如果用 CSS-in-JS 或框架（如 React），注意 style 对象是只读的，得用
el.setAttribute('style', ...)或el.style.cssText
transition 比 animation 更适合简单往返动效
如果你只是想让元素在 hover/active 状态来回移动、缩放、淡入淡出，别硬套 animation + direction。用 transition 更轻量、更自然、兼容性更好。
例如按钮悬停放大又缩回：
button {
transform: scale(1);
transition: transform 0.2s ease;
}
button:hover {
transform: scale(1.1);
}
- hover 离开时，
transition自动反向执行，无需任何 direction 设置 - 性能上，
transform+opacity是仅有的两个能触发硬件加速且可逆的属性，其他如width、height会导致 layout，反向时卡顿明显 - 若需复杂路径（如贝塞尔曲线），用
transition-timing-function调整缓动，比写多段 keyframes 更直观
动画反向逻辑的核心不在 direction，而在“谁来定义起点和终点”。CSS 动画一旦运行，就脱离了 DOM 当前样式；想让它听话地原路返回，就得明确告诉浏览器：这是新动画，不是旧动画的镜像。这点最容易被忽略，也最难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
