用 animation-direction: alternate 是唯一可靠解法，它使动画正向播完自动反向播回，循环往复，无需js干预或重复keyframes，且原生同步无延迟、无跳变。
animation-direction: alternate 是唯一可靠解法
直接说结论：用 animation-direction: alternate，而不是靠 JavaScript 控制或手动写两段 keyframes。它让动画正向播完自动反向播回，且每次循环都保持这个模式，无需额外逻辑。
常见错误是试图用 animation-direction: reverse 配合 animation-fill-mode: forwards，结果只反转第一轮、后续全乱；或者误以为 animation-iteration-count: 2 + 手动切方向能模拟，但无法做到无缝衔接和状态重置。
-
alternate必须配合animation-iteration-count大于 1（比如infinite或2），否则看不出“反向回来”的效果 - 反向播放时，
@keyframes中的 0% 和 100% 会互换角色：原 0% 变成终点，原 100% 变成起点 - 注意 timing function：如果用了
ease-in，反向时它会变成ease-out（浏览器自动镜像缓动曲线）
为什么不用 JavaScript 监听 animationend 再反转？
理论上可行，但实际掉坑率极高。核心问题是：动画结束瞬间 DOM 状态已定，你改 animation-direction 或重设 animation-name 会触发重排，造成视觉跳变或卡顿。
更麻烦的是时间精度——animationend 事件触发有微小延迟（尤其低端设备），而 CSS 原生 alternate 是渲染引擎级同步，无延迟、无竞态。
- 不要在
animationend里调用el.style.animationDirection = 'reverse' - 避免用
setTimeout补偿延迟，这会让节奏不可控 - 若必须用 JS（比如要动态切换方向逻辑），优先用
el.getAnimations()检查当前播放状态，而非依赖事件
alternate 和 alternate-reverse 的区别在哪？
别被名字绕晕：alternate 是“第一次正向、第二次反向、第三次正向……”，而 alternate-reverse 是“第一次反向、第二次正向、第三次反向……”。绝大多数需求只需要前者。
典型误用场景：想让元素从隐藏态淡入再淡出，却设了 alternate-reverse，结果第一帧就从 opacity: 1 开始闪一下——因为反向播放时，keyframes 的 0% 被当成了初始值。
- 默认起始状态由元素自身样式决定，不是 keyframes 的 0%
- 如果 keyframes 里写了
0% { opacity: 0; }，那alternate第一次播就是 0→1，第二次播就是 1→0 -
alternate-reverse第一次播是 1→0（把 100% 当起点），容易导致意料外的初始闪烁
兼容性与性能要注意什么？
animation-direction: alternate 在所有现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）都稳定支持，连 iOS Safari 9.3 都没问题。真正要盯的是硬件加速和重绘开销。
反向播放本身不增加计算量，但如果你在 keyframes 里写了大量 transform 或 filter，且没触发 GPU 加速，来回播放可能引发掉帧。
- 确保动画属性是可合成的：优先用
transform和opacity，避免left、top、width - 加
will-change: transform提前提示浏览器（但别滥用，仅对频繁动画的元素） - 测试真机：iOS 上某些 filter 动画在
alternate模式下有轻微撕裂，可降级为单向 + JS 控制
animation-play-state 暂停/恢复，比硬切方向安全得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
