animation-direction: alternate 无效主因是 animation-iteration-count 未设或为1；必须设为 infinite 或≥2才生效，且需避免 animation-fill-mode: forwards 破坏衔接，关键帧应首尾明确、使用 transform/opacity 等合成属性。
animation-direction: alternate 无效，90% 是因为 animation-iteration-count 没设或设成了 1。
animation-iteration-count 必须大于 1 才能触发交替
浏览器默认把 animation-iteration-count 当作 1，意味着只播一次。而 alternate 的逻辑是“第 1 次正向、第 2 次反向、第 3 次正向……”，没第 2 次，就永远看不到反向。
- 显式写
animation-iteration-count: infinite或2才生效 - 简写中漏掉循环次数，比如只写
animation: slide 1s;，等价于animation-iteration-count: 1，alternate形同虚设 - 用
animation简写时，alternate可以放在任意位置，但必须和infinite或数字一起出现，例如：animation: slide 1s ease-in-out infinite alternate;
animation-fill-mode: forwards 会破坏交替衔接
设了 animation-fill-mode: forwards 后，动画结束后 DOM 会“锁住”在 100% 的样式；而第二轮 alternate 要从 100% 开始倒播，此时浏览器却先把元素视觉状态拉回 0%，造成跳变或卡顿。
- 去掉
forwards是最稳妥的解法（默认值是none） - 如果真需要保持结束态，改用
backwards或both，但要注意它们只影响动画开始前/结束后，不干预中间轮次衔接 - 更健壮的做法是让关键帧首尾一致（如
0%, 100% { transform: translateX(0); }），避免依赖 fill-mode
alternate 和 reverse 完全不是一回事，混用会失效
有人试图写 animation-direction: alternate-reverse 或同时设 reverse 和 alternate，这在 CSS 中不合法——浏览器直接忽略，退回到 normal。
-
alternate：第 1 次按你写的 @keyframes 顺序走（0% → 100%），第 2 次自动倒着走（100% → 0%） -
alternate-reverse：第 1 次就倒着走（100% → 0%），第 2 次才正着走（0% → 100%）——IE 不支持，且语义容易反直觉 -
reverse是单次倒播，和循环无关；它和alternate是互斥选项，不能共存
关键帧定义不当也会让交替“看不见”
即使方向和循环都配对了，如果 @keyframes 里 0% 和 100% 样式完全一样（比如都是 opacity: 1），或者用了 left/top 这类触发 layout 的属性，交替过程可能表现为静止、闪跳或重排抖动。
- 优先用
transform和opacity，它们是合成属性，倒播也平滑 - 确保 0% 是明确的“起始态”，100% 是“目标态”，否则
alternate的往返映射会失去语义 - 缓动函数（如
cubic-bezier）在反向时会自动镜像，不需要手动调整
最容易被忽略的是：暂停后恢复，方向计数器不会重置。一个播到第 5 次（正向）的 infinite alternate 动画，暂停再 play，它不会从头开始，而是继续播完第 5 次，再进第 6 次反向——这个行为没法靠 CSS 控制，得靠 JS 配合 Web Animations API 如果需要精确干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
