CSS如何控制动画的播放方向_通过animation-direction设置反向css

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 设错了。