用 animation-direction: alternate 可实现去→回→去→回的往返动画，需配合 animation-iteration-count: infinite；alternate 首次正向，alternate-reverse 首次反向；应使用 transform 避免重排，必要时加 will-change: transform。
用 animation-direction: alternate 实现基础往返
默认的 CSS 动画只单向播放一次或循环，要让它“去→回→去→回”反复切换方向，核心是 animation-direction 属性。设为 alternate 后，每次迭代都会翻转动画方向：第 1 次正向执行 @keyframes，第 2 次反向执行（从 100% 倒播到 0%），第 3 次再正向……这样视觉上就是往返运动。
注意它必须配合 animation-iteration-count: infinite 才能持续往返；如果只写 alternate 但没设循环次数，动画播完一次就停了，根本看不到“返”。
div {
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
<p>@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
alternate-reverse 和 alternate 的区别在哪
两者都做往返，但起始方向不同：alternate 第 1 轮正向（0% → 100%），alternate-reverse 第 1 轮反向（100% → 0%）。如果你的动画初始状态在终点，又想第一帧就往回走，才需要后者。
-
alternate：适合“从起点出发→到终点→返回起点→再出发…”这种自然节奏 -
alternate-reverse：适合“先在终点待着→突然往回跑→到起点→再冲出去…”这类反直觉动效 - 绝大多数往返需求用
alternate就够了，别为了“听起来更全”硬套alternate-reverse
往返动画卡顿？检查 transform 和 will-change
往返运动频繁触发重排（reflow）时容易掉帧，尤其涉及 left/top 这类会触发布局计算的属性。必须用 transform: translateX() 等合成层友好的属性。
立即学习“前端免费学习笔记（深入）”；
另外，如果动画元素本身结构复杂或父容器有遮罩/滤镜，建议加 will-change: transform 提前提示浏览器升层——但别滥用，每个元素都加反而拖慢初始化。
- ✅ 正确：用
transform: translateX()、scale()、rotate() - ❌ 避免：用
left、margin-left、width触发 layout - ⚠️ 谨慎：
will-change: transform只加在真正动画的元素上，且动画结束后最好设回auto
想控制“往返”的停顿时间？靠 @keyframes 手动分段
alternate 是匀速往返，没法在两端“多停一会儿”。如果需要“走到右边→停 0.5s→慢慢回来→在左边停 0.5s”，就得放弃 alternate，改用单向循环 + 关键帧内控时长：
@keyframes pingpong {
0%, 20% { transform: translateX(0); } /* 左边停住 */
50% { transform: translateX(100px); } /* 走到右边 */
80%, 100% { transform: translateX(0); } /* 回到左边并停住 */
}
<p>div {
animation: pingpong 4s infinite;
}这里 0%–20% 和 80%–100% 都是静止区间，实际运动只占中间 30% 时间。百分比数值可按需调整，但要注意总和必须是 100%，否则节奏错乱。
这种写法灵活，但维护成本高；alternate 简洁但不够精细——选哪个，取决于你是否真需要那几毫秒的停顿精度。
