如何通过设置animation-direction实现CSS元素反向动画并回到初始位置？

本文共计1021个文字，预计阅读时间需要5分钟。

许多人以为将 `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 切换。