animation-direction: alternate 本身不产生往返效果，必须配合 animation-iteration-count（如 infinite）才能实现来回动画；第1次始终正向播放，方向切换仅发生在第2次及以后迭代。
animation-direction: alternate 本身不产生往返效果，它只决定“第几次迭代走哪个方向”。真正让动画来回动的，是 animation-iteration-count。
为什么写了 alternate 却只动一次？
最常见原因：没显式设置 animation-iteration-count，或它的值仍是默认的 1。alternate 只在第 2 次及以后的迭代中生效——第 1 次正向播完，就没第 2 次了，方向根本没机会切换。
- 简写语法里漏掉
infinite或具体数字，比如只写animation: slide 2s ease;，等价于animation-iteration-count: 1 - 用了
animation-fill-mode: forwards且最后一帧和起始帧状态不同，视觉上“卡住”，误以为方向没变 - 关键帧两端不一致（如
0% { opacity: 0; }→100% { opacity: 1; }），往返时因缓动不对称导致跳变，看起来像方向失效
animation: … infinite alternate 是最小必要配置
要实现一个完整“去→回”周期，必须明确告诉浏览器：“我要播多次”。infinite 或具体数字（如 3）不可省略。
- 推荐写法：
animation: slide 2s ease-in-out infinite alternate; -
alternate可以单独声明，也可以塞进animation简写里，位置不限，但不能省略 - 关键帧建议让
0%和100%状态一致（如都设transform: translateX(0);），中间帧做变化，避免往返时视觉跳变
alternate 和 alternate-reverse 的区别在哪？
别只看名字，要看第一遍怎么走——这直接决定用户第一眼看到的是“出发”还是“回撤”。
-
alternate：第 1 次按你写的@keyframes顺序播（0% → 100%），第 2 次倒着播（100% → 0%） -
alternate-reverse：第 1 次就倒着播（100% → 0%），第 2 次才正着（0% → 100%） - IE10+ 支持
alternate，但不支持alternate-reverse；老项目慎用后者 - 如果关键帧是
0% { opacity: 0; } → 100% { opacity: 1; }，用alternate-reverse第一眼就是“从有到无”，容易引发误解
暂停后恢复，方向不会重置
这是最容易被忽略的运行时行为：animation-play-state: paused 不会清空方向计数器。
- 一个
infinite alternate动画播到第 5 次（正向），暂停后再play，它继续播完第 5 次正向，然后才切到第 6 次反向 - 你无法靠暂停/恢复来“手动切方向”。真需要点击一次前进一帧、再点一次后退，得放弃纯 CSS 动画，改用
transform+ JS 控制style.transform，或拆成两个独立动画手动切换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
