animation-direction控制动画多次迭代时的播放顺序方向，仅在animation-iteration-count大于1时生效；设为1则无效，常见错误是未显式设置迭代次数。
animation-direction 不是用来“设置动画方向”的，而是控制动画在多次迭代中**播放顺序的方向**。它只在 animation-iteration-count 大于 1 时才起作用；设为 1 就完全没效果。
为什么设了 reverse 却没看到反向？
最常见原因是动画只播一次。比如：
.box {
animation: slide 1s 1;
}
这里 animation-iteration-count 是 1（默认值），animation-direction: reverse 就被浏览器忽略。必须显式加次数：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
animation: slide 1s 2 reverse;→ 播两次，每次都从 100% 往回走到 0% -
animation: slide 1s infinite alternate;→ 无限循环，第 1 次正向、第 2 次反向、第 3 次正向…… - 用简写时顺序不能错：
animation: [name] [duration] [timing] [delay] [iteration] [direction] [fill]
alternate 和 alternate-reverse 的区别在哪？
两者都用于往复动画，但起点不同：
-
alternate：第 1 次从0%→100%（正向），第 2 次从100%→0%（反向） -
alternate-reverse：第 1 次从100%→0%（反向），第 2 次从0%→100%（正向） - 如果你的元素初始状态就是动画的终点（比如已经
transform: translateX(100px)），又想让它先往回动，就该用alternate-reverse
JS 动态改 animationDirection 为啥不生效？
DOM 的 style.animationDirection 属性能读能写，但直接赋值后动画不会“立刻反转”。原因有二：
- 浏览器把当前动画当做一个独立事务，运行中不响应 direction 变更
- 必须先中断再重播：比如删 class 再加回来，或触发
animation: none后一秒内恢复 - 稳妥做法是换一个不同的
animation-name，哪怕只是加个空格，也能强制重置
真正容易被忽略的是：方向翻转时，cubic-bezier 时间函数也会被镜像应用——比如 ease-in 在反向时就变成“慢结束”，而不是继续“慢开始”。这点在做呼吸、弹跳类动画时，会直接影响节奏感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
