animation-direction: alternate 仅定义循环方向规则，需配合 animation-iteration-count 大于1才生效；默认值为1，故只动一次；alternate-reverse 首次即反向，ie10+不支持；往返跳变多因关键帧或缓动函数不对称。
animation-direction: alternate 本身不触发循环，只定义“每次循环的方向规则”。要看到往返效果，必须让动画真正循环起来。
为什么加了 alternate 却只动一次？
最常见原因是没设 animation-iteration-count，或它值为 1（默认值）。alternate 只在第2次及以后的迭代中才起作用——第1次正向，第2次反向，第3次再正向……如果只播1遍，方向根本没机会切换。
检查你的写法是否类似这样：
div { animation: slide 2s; }
这等价于：
div {
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: 1; /* 关键！默认就是1 */
animation-direction: normal;
}
改成下面任意一种才有效：
animation: slide 2s infinite alternate;-
animation: slide 2s 3 alternate;（播3遍：正→反→正） - 或分开写：
animation-iteration-count: infinite;+animation-direction: alternate;
alternate 和 alternate-reverse 的实际差别在哪？
两者都交替，但“第1次怎么走”不同：
-
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，元素先向右→再向左回原点；用 alternate-reverse，它第一帧就出现在 100px 位置并向左移，容易让人误以为关键帧写错了。
IE10+ 支持 alternate，但不支持 alternate-reverse —— 老项目慎用。
往返时出现跳变、卡顿或方向错乱？
大概率是 @keyframes 定义和缓动函数不匹配。例如：
- 0%
opacity: 0，100%opacity: 1，又用了ease-in-out - 往返时，去程是慢入快出，回程变成快入慢出，视觉上像突然加速/减速甚至“抽搐”
更稳妥的做法是让首尾帧状态一致：
@keyframes breathe {
0%, 100% { transform: scale(1); } /* 两端相同 */
50% { transform: scale(1.2); }
}
这样无论正向还是反向播放，过渡都自然。如果必须用非对称关键帧（如位移+透明变化），建议把 animation-timing-function 改成 linear，消除缓动带来的方向感知偏差。
暂停后恢复，方向会重置吗？
不会。animation-direction 不跟踪“当前是第几次”，它只按迭代序号决定方向。比如一个 infinite alternate 动画播到第3次（正向）时被 animation-play-state: paused 暂停，恢复后仍继续完成第3次正向，然后才进第4次反向。
这意味着：
- 不能靠暂停/恢复来“手动切方向”
- 如果需要精确控制单步前进/后退（比如点击切换），得放弃纯 CSS，改用 JS 直接操作
style.transform或拆成两个独立@keyframes手动切换
真正容易被忽略的，是 animation-fill-mode: forwards 和 alternate 的组合——它会把最后一次迭代的结束帧“冻住”，可能掩盖掉方向切换后的起始状态，导致你以为动画失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
