animation-direction 仅控制多轮迭代时的播放顺序，单次播放（iteration-count: 1）下 reverse/alternate 无效；需显式设置 iteration-count > 1 或 infinite 才生效，且简写中 direction 必须紧随 iteration-count 后。
animation-direction 不是用来“设置动画方向”的，它只控制动画在多次迭代时的播放顺序方向。设为 1（即单次播放）时，无论写 reverse 还是 alternate，都无效。
为什么设了 reverse 却没反向？
最常见原因是 animation-iteration-count 没显式设大于 1：
-
.box { animation: slide 1s; }→ 默认iteration-count: 1，animation-direction: reverse被完全忽略 - 必须显式加次数：
animation: slide 1s 2 reverse;→ 播两次，每次都是从 100% 往回走到 0% - 或用
infinite：animation: slide 1s infinite alternate;→ 第 1 次正向、第 2 次反向、第 3 次正向……
alternate 和 alternate-reverse 的起点差异
两者都用于往复动画，但第 1 次播放的起始帧不同：
-
alternate：第 1 次从0%→100%（正向），第 2 次从100%→0%（反向） -
alternate-reverse：第 1 次从100%→0%（反向），第 2 次从0%→100%（正向） - 如果你的元素初始状态就是动画终点（比如已
transform: translateX(100px)），又想让它先往回动，就该用alternate-reverse
简写语法中 direction 的位置不能错
animation 简写属性的顺序是固定的：name duration timing-function delay iteration-count direction fill-mode：
- ✅ 正确：
animation: move 0.5s ease-in 0.1s 3 alternate; - ❌ 错误：
animation: move 0.5s ease-in 3 alternate 0.1s;→ 浏览器会忽略错位的值，可能降级为默认normal - 注意：
direction必须紧跟在iteration-count后面，中间不能插入其他值
容易被忽略的是：暂停后切方向（比如从 paused 改成 running 同时改 direction），动画不会跳帧，而是从当前帧位置开始反向运行动画——这意味着如果关键帧设计不连续（比如突变的 opacity 或 display），视觉上就会断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
