animation-direction: alternate 未生效是因为缺少 animation-iteration-count（如 infinite），它仅定义每次迭代方向，不控制循环次数；需配合多次迭代才能体现往返效果。
animation-direction: alternate 为什么没生效
常见现象是加了 animation-direction: alternate，但动画只正向跑一遍就停了，根本没“往返”。根本原因：缺了循环控制——animation-direction 本身不控制播放次数，它只定义「每次迭代」的方向，必须配合 animation-iteration-count（比如设为 infinite 或大于 1 的数）才看得到交替效果。
使用场景多见于按钮悬停反馈、加载指示器、图标呼吸动效。注意：如果 animation-iteration-count: 1，那 alternate 完全没意义，第二遍都不播，何来“换方向”？
-
animation-direction: alternate+animation-iteration-count: 2→ 第1次正向，第2次反向 -
animation-direction: alternate-reverse是反向起手的交替，即第1次反向，第2次正向 - IE10+ 支持
alternate，但 IE 不支持alternate-reverse（别在兼容老项目里用）
animation-direction 与 animation-play-state 的交互陷阱
暂停动画再恢复时，animation-direction 不会“重置方向计数”。比如一个 infinite + alternate 动画播到第3次（正向），暂停后恢复，它会继续第3次正向播完，然后才切到第4次反向——不是从头开始交替。
这意味着：你不能靠暂停/恢复来“强制切方向”。如果真需要手动控制往返节奏（比如点击一次前进一帧、再点一次后退），得放弃纯 CSS 动画，改用 transform + JS 控制 style.transform，或用 @keyframes 拆成两个独立动画手动切换。
立即学习“前端免费学习笔记（深入）”；
- 浏览器不会把暂停态记为一次“完整迭代”，所以方向切换时机完全由已播放的 iteration 次数决定
-
animation-play-state: paused期间，animation-direction值仍有效，但不执行 - 用
getComputedStyle(el).animationDirection查不到运行时方向，只能读声明值
alternate 和 keyframes 里的 from/to 顺序强相关
animation-direction: alternate 的“反向”不是镜像翻转，而是按 keyframes 中定义的帧顺序倒着播。也就是说，反向播放时，from 变成终点，to 变成起点；如果你 keyframes 写的是 from { opacity: 0 } → to { opacity: 1 }，那反向就是从 1 变回 0。
容易踩的坑：有人以为 alternate 能让动画“自动适配”起止状态，结果发现反向第一帧卡顿或跳变——其实是 keyframes 里中间帧没对称写好。例如：
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
这个动画正向是“0→100→0”，反向就是“0→100→0”倒播，看起来一样；但如果删掉 50%，只留 0% 和 100%，反向就只是线性来回，无中间缓冲。
- 反向播放不改变 keyframes 的数值计算逻辑，只改变时间轴采样顺序
- 想让往返都带缓动，别只依赖
animation-timing-function，要在 keyframes 里显式写出对称关键帧 - 用
animation-timing-function: ease-in-out配合alternate，效果常不如直接在 keyframes 里用cubic-bezier()精控
用 JavaScript 动态切换 animation-direction 的实际限制
能写，但别指望它实时“掰正”正在播的动画。给元素动态设置 style.animationDirection = 'reverse'，浏览器会等当前 iteration 结束后，才在下一次迭代应用新方向——不是立即反转运动。
真正需要帧级方向干预（比如拖拽中实时反向），得放弃 animation-direction，改用 requestAnimationFrame 手动更新 transform 或 opacity。CSS 动画的方向控制是声明式的、面向整个动画周期的，不是命令式的、面向单帧的。
- DOM 属性修改触发的是样式重计算，不是动画重调度
- 用
el.getAnimations()可以拿到当前动画实例，但它没有reverse()方法（Chrome 115+ 有reverse()，但仅限 Web Animations API，不适用于 CSS animation 声明） - 服务端渲染或 SSR 场景下，初始
animation-direction值若靠 JS 注入，可能闪一下默认方向
