animation-direction 支持哪些取值？
animation-direction 控制单次循环内关键帧的执行顺序，不是“让整个动画倒着播”，而是决定每一遍循环里 @keyframes 是正向走还是反向走。
它有四个合法值：normal、reverse、alternate、alternate-reverse。其中 normal 是默认值，容易被忽略——如果你没显式设置，动画永远从 0% 走到 100%。
-
reverse：每遍都从 100% 倒着走到 0%，视觉上像“倒放”，但时间轴仍是正向推进（即animation-duration不变） -
alternate：第 1 遍 normal，第 2 遍 reverse，第 3 遍 normal……奇数次正向，偶数次反向 -
alternate-reverse：第 1 遍 reverse，第 2 遍 normal，第 3 遍 reverse……奇数次反向，偶数次正向
为什么设置了 reverse 却看不出反向效果？
常见错误是只改了 animation-direction，但没检查 @keyframes 定义是否真有可感知的变化。比如：
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
这段动画用 reverse 时，0% → 100% 的位移会变成 100% → 0%，也就是从 translateX(100px) 开始，回到 translateX(0) —— 但如果你没给元素初始状态设成 translateX(100px)，浏览器会从默认的 translateX(0) 开始过渡，导致第一帧“跳变”。
立即学习“前端免费学习笔记（深入）”；
- 要让
reverse看起来自然，得确保元素初始样式和 keyframes 的终点一致（或用animation-fill-mode: backwards补帧） -
alternate类型下，如果 keyframes 里 0% 和 100% 样式相同（比如都是opacity: 1），反向那遍就完全不可见 - 动画时长
animation-duration和延迟animation-delay不受 direction 影响，别指望靠它“延长等待时间”
和 animation-play-state、animation-iteration-count 搭配要注意什么？
animation-direction 和播放控制类属性是正交的，但组合使用时容易误判行为。比如：
- 设了
animation-iteration-count: 2+animation-direction: alternate，就是 normal → reverse，共两遍；但如果设成3，就是 normal → reverse → normal，第三遍又回到正向 -
animation-play-state: paused暂停后恢复，方向不会重置——暂停在 reverse 阶段，继续播还是 reverse - 用 JavaScript 动态改
style.animationDirection，浏览器会立即切方向，但当前帧位置不变（比如正向播到 60%，切 reverse 后会从 60% 往 0% 走）
实际项目中更推荐 alternate 还是 reverse？
单独用 reverse 场景极少，基本只用于调试或特殊过渡衔接；真正实用的是 alternate 和 alternate-reverse，尤其做呼吸、摇晃、hover 反馈这类来回动效。
- 按钮 hover 缩放：用
alternate可避免鼠标反复进出时“卡在中间态”，因为每次进都是 normal（放大），出是 reverse（缩回） - loading 指示器旋转：如果用
reverse，转半圈就停，用户会觉得“没转完”；而infinite+alternate更符合直觉 - 注意兼容性：
animation-direction在 IE10+、Edge 12+、Chrome 43+、Firefox 16+ 都支持，但 Safari 9 之前不支持alternate-reverse，只认前三个值
方向控制本身很简单，难的是配合 keyframes 起止点、fill-mode、iteration-count 一起算清楚每一帧该在哪——多数“动得不对”，其实是起始样式和关键帧没对齐，而不是 direction 设错了。
