animation-direction: alternate 本身不产生往返效果，真正实现往返的是 animation-iteration-count；alternate 仅在第2次及以后迭代生效，若 iteration-count 为1（默认值）则方向切换无机会发生。
animation-direction: alternate 本身不产生往返效果，它只定义“第几次迭代走哪个方向”。真正让动画动起来、来回起来的，是 animation-iteration-count。
为什么写了 alternate 却只动一次？
最常见原因：没显式设置 animation-iteration-count，或它值为 1（默认值）。alternate 只在第 2 次及以后的迭代中才起作用——第 1 次正向播完，就没第 2 次了，方向根本没机会切换。
比如下面这行：
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 的区别在哪？
别只看名字，重点看“第一次怎么走”——这直接决定用户第一眼看到的是出发还是回撤。
-
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 位置并向左移，容易让人误以为关键帧写错了。
注意：alternate-reverse 在 IE10+ 不被支持，老项目慎用。
关键帧和缓动函数怎么配才不跳变？
往返时视觉跳变，90% 出自两个地方：
-
0%和100%状态不一致（比如0% { opacity: 0; }→100% { opacity: 1; }），反向播放时起点突然变亮/变暗 - 用了不对称缓动函数（如
ease-in），正向慢启动、反向却快收尾，节奏割裂
推荐做法：
- 往返动画的关键帧两端尽量保持一致（如都设
transform: translateX(0)），中间用偏移制造运动感 - 优先用对称缓动：
ease-in-out或cubic-bezier(0.4, 0, 0.6, 1) - 避免在关键帧里用
top/left，改用transform防重排
暂停后恢复，方向会重置吗？
不会。这是最容易被忽略的运行时行为：animation-play-state: paused 不会清空方向计数器。
一个 infinite alternate 动画播到第 5 次（正向），暂停后再 play，它继续播完第 5 次正向，然后才切到第 6 次反向。
你无法靠暂停/恢复来“手动切换方向”——方向完全由已执行的 iteration 次数决定。如果真需要点击一次前进一帧、再点一次后退，得放弃纯 CSS 动画，改用 JS 控制 style.transform 或拆成两个独立动画手动切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
