最常见的原因是 animation-iteration-count 未设为大于1的值，默认为1导致无法往返；需配合 infinite 或具体次数使用 alternate，并确保 keyframes 起止状态一致、timing-function 合理。
animation-direction: alternate 为什么没生效
最常见的原因是 animation-iteration-count 没设为大于 1 的值。默认是 1，只播一次，根本没机会“往返”。alternate 必须配合多次播放才起作用。
检查你的动画定义是否类似这样：
div {
animation: slide 2s;
}
这等价于 animation-direction: normal + animation-iteration-count: 1，方向固定、只走一遍。要启用往返，至少得写成：
div {
animation: slide 2s infinite alternate;
}
-
infinite或具体数字（如3）才能触发方向切换 -
alternate必须写在animation简写中，或单独声明animation-direction: alternate - 如果用了
animation-fill-mode: forwards，注意它会锁定最后一帧状态，可能掩盖方向变化的视觉效果
alternate 和 alternate-reverse 的区别在哪
两者都让动画在奇数次（第1、3、5…遍）正向播放，偶数次反向；区别在于“正向”的基准不同。
立即学习“前端免费学习笔记（深入）”；
-
alternate：第1遍按 @keyframes 原始顺序执行（0% → 100%），第2遍倒着走（100% → 0%） -
alternate-reverse：第1遍先倒着走（100% → 0%），第2遍再正向（0% → 100%）
比如一个从左到右平移的动画：
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
用 alternate 时，元素第1次向右移，第2次向左移回原点；用 alternate-reverse 则第1次就向左移（从 100px 回 0），容易误以为动画写错了。
循环中方向不一致，但不是想要的往返效果
如果你看到动画在某几轮突然“跳变”或方向混乱，大概率是 keyframes 定义和 timing function 不匹配导致的。
- 避免在 0% 和 100% 设置互斥状态（例如 0%
opacity: 0，100%opacity: 1，又用ease-in-out）——往返时过渡曲线不对称，视觉上像卡顿或方向错乱 - 更稳妥的做法是让 0% 和 100% 状态一致（比如都是
transform: translateX(0)），中间帧做变化，这样往返更平滑 - 如果必须用非对称关键帧，建议改用
animation-timing-function: linear，消除缓动带来的方向感知偏差
JavaScript 控制 animation-direction 时的坑
直接操作 element.style.animationDirection = 'alternate' 可能无效，因为简写属性 animation 会覆盖单个子属性。
- 要么统一用简写设置：
el.style.animation = 'slide 2s infinite alternate'; - 要么确保没有其他地方用
animation简写重置了整个动画声明 - 动态切换时，推荐先清空再重设：
el.style.animation = '';再赋新值，避免浏览器解析冲突 - 注意 CSS 自定义属性（
--anim-dir）无法直接绑定到animation-direction，得靠 JS 注入或 CSS @property（兼容性有限）
alternate 本身，而是 keyframes 起止状态的设计和 timing function 的选择。很多人调了半天 direction，最后发现是 0% 和 100% 的 transform 值不闭合，或者用了 ease-out 导致返程“刹不住”。 
