在网页动效开发中，控制动画的播放方向是构建自然交互体验的基础能力。CSS提供的animation-direction属性专门用来定义动画在每个循环周期内时间线的行进方向，开发者无需编写JavaScript逻辑即可实现正向、反向以及交替播放等效果。
一、animation-direction的基本语法
animation-direction是CSS动画简写属性animation的一个子属性，也可以单独声明。它接受单个关键字或逗号分隔的关键字列表（用于多动画场景），主要作用于由@keyframes定义的动画序列。
其基本语法格式如下：
/* 单动画方向设置 */
.element {
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* 多动画分别指定方向 */
.box {
animation-name: move, fade;
animation-direction: normal, reverse;
}
需要注意的是，该属性只有在animation-iteration-count大于1，或者配合animation-fill-mode在特定模式下，方向差异才会被明显感知。如果动画只播放一次，reverse仅代表初始状态从结束帧开始回溯，视觉上依然是一次完整过程。
二、四个取值的底层逻辑与差异
animation-direction包含四个标准取值，它们直接改变了浏览器对关键帧时间轴的采样顺序。下面逐一拆解其运作原理。
1. normal（默认值）
normal表示每次动画迭代都从0%关键帧向100%关键帧正序推进。所有循环之间互不干扰，每次重新开始都回到起始定义状态。这是最常见的加载 spinner 或入场动画的选择。
示例代码如下：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
.normal-demo {
animation: slide 1.5s infinite normal;
}
在上述例子中，元素每次都会从左侧原点突然跳回并重新向右滑动，因为每次迭代结束就立即复位到from状态。
2. reverse
reverse使每一次迭代都从100%关键帧反向采样到0%关键帧。动画首次运行时元素会直接出现在结束位置，然后朝起点移动。循环时同样保持逆序，不会自动变为正序。
代码演示：
.reverse-demo {
animation: slide 1.5s infinite reverse;
}
如果结合animation-delay使用，reverse元素在延迟期间就会停留在to所描述的状态，这一点在制作退出动画复用同一组关键帧时非常实用。
3. alternate
alternate实现奇偶次迭代方向交替：第1次正序、第2次逆序、第3次正序，以此类推。它让元素在两端之间平滑往返，不会产生复位跳跃，适合呼吸缩放或颜色渐变往复。
使用示例：
@keyframes breathe {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.3); opacity: 0.6; }
}
.alternate-demo {
animation: breathe 2s infinite alternate;
}
由于alternate在逆序播放时是从100%回到0%，元素的scale与opacity都会自然倒放，避免了用两段关键帧拼接的麻烦。
4. alternate-reverse
alternate-reverse与alternate相反，第1次为逆序、第2次为正序。它常用于希望页面加载后元素先从外向内收敛，之后再来回摆动的场景。
.alternate-reverse-demo {
animation: breathe 2s infinite alternate-reverse;
}
在调试时，如果发现动画首次运行方向不符合设计稿，优先检查是否错写为alternate-reverse，这是实际项目中最高频的方向类bug。
三、与其他动画属性的协作关系
animation-direction并非孤立生效，它与iteration-count、fill-mode存在强关联。当iteration-count为1时，alternate与normal视觉差异仅体现在reverse类取值的首帧位置；而当设置为infinite时，alternate系列才能展现往返特性。
下面的表格总结了常见组合效果：
| direction值 | iteration-count | 首次播放方向 | 循环表现 |
|---|---|---|---|
| normal | infinite | 正序 | 每次跳回起点重放 |
| reverse | infinite | 逆序 | 每次跳回终点重放 |
| alternate | infinite | 正序 | 首尾往返不跳变 |
| alternate-reverse | infinite | 逆序 | 尾首往返不跳变 |
另外，在animation简写中，direction位于duration与delay之后、fill-mode之前。书写顺序错误可能导致浏览器忽略方向声明。推荐将direction单独列出以便于维护。
四、实战：用方向属性做卡片轮播指示
假设我们实现一个左右箭头点击后高亮来回扫动的效果，无需JS控制类名的添加与移除，仅用alternate即可完成。
结构如下：
<div class="indicator"></div>
样式定义：
.indicator {
width: 40px;
height: 4px;
background: #3498db;
animation: sweep 1s 3 alternate ease-in-out;
}
@keyframes sweep {
from { transform: translateX(0); }
to { transform: translateX(120px); }
}
上述代码让指示条正向滑动后再反向滑回，重复三次后停止在起始位置。如果将direction改为alternate-reverse，则首次就反向移动，更贴合某些从右侧退出的交互预期。
五、常见误区与排查建议
不少开发者误以为reverse会改变元素默认样式，其实它只影响动画时间轴，未运行动画时元素仍由非动画CSS规则控制。若看到元素静态时位置异常，应检查普通样式而非direction。
另一个误区是在多动画列表中方向数量与name数量不匹配。此时浏览器会按循环重复最后一个值，造成部分动画方向不符合预期。建议用开发者工具逐条核对computed样式中的animation-direction字段，确认每个动画序列的关键字符合设计。
综上所述，animation-direction通过四个简单取值即可覆盖绝大多数播放方向需求。理清normal、reverse与alternate家族的差异，能够用纯CSS替代大量定时器与状态翻转代码，让动效更流畅且易于维护。
CSS动画animation-direction动画方向修改时间：2026-08-01 18:57:42