animation-direction: alternate 本身不实现往返，需配合 animation-iteration-count（如 infinite 或具体数字）才能生效；仅设 alternate 而 iteration-count 为默认值 1 时无往返效果。
animation-direction: alternate 本身不实现往返，它只定义“每次迭代的方向逻辑”；真正让动画动起来、往返起来的，是 animation-iteration-count。没设循环次数，alternate 就是摆设。
animation-direction: alternate 为什么没效果
最常见现象：写了 animation-direction: alternate，但动画播完一次就停了，完全没“返”的迹象。
-
animation-iteration-count默认值是1，意味着只执行一遍 —— 奇数次（第1次）正向播完，就没第2次了，alternate根本没机会触发 - 简写语法里漏掉
infinite或具体数字，比如只写animation: slide 2s ease;，等价于animation-iteration-count: 1 - 用了
animation-fill-mode: forwards且最后一帧和起始帧状态不同，视觉上“卡住”，误以为方向没变
实现真正往返的最小必要配置
往返 ≠ 多次单向循环，而是一次“去 + 回”构成一个完整周期。要让这个周期出现，必须明确告诉浏览器：“我要播多次”。
- 必须显式设置
animation-iteration-count：用infinite持续往返，或用数字如3表示往返 3 次（即共 6 次单向播放） -
animation-direction: alternate可以单独声明，也可以塞进animation简写里，位置不限，但不能省略 - 推荐写法：
animation: slide 2s ease-in-out infinite alternate; - 关键帧两端建议一致（如
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次反向 - 你无法靠暂停/恢复来“手动切换方向”——方向完全由已执行的 iteration 次数决定
- 如果真需要点击一次前进一帧、再点一次后退，就得放弃纯 CSS，改用 JS 控制
style.transform或拆成两个独立@keyframes手动切换
真正难的不是写对那行 alternate，而是理解它不控制“是否循环”，只控制“循环时怎么走”。方向逻辑和循环次数是两把锁，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
