animation-direction用于控制CSS动画播放方向，其可选值包括normal（正向）、reverse（反向）、alternate（奇次正向偶次反向）和alternate-reverse（首次反向后交替），常配合@keyframes与animation属性使用，适用于呼吸效果、往返移动等场景，结合animation-iteration-count: infinite可实现平滑循环动画。
CSS中的 animation-direction 属性用于控制动画的播放方向。通过这个属性，你可以让动画正向、反向、交替循环等，灵活控制视觉效果。它通常配合 @keyframes 和其他动画属性（如 animation-name、animation-duration）一起使用。
1. animation-direction 可选值说明
该属性有四个主要取值，每种对应不同的播放行为：
- normal：默认值，动画按 keyframes 中定义的方向播放（从 0% 到 100%）。
- reverse：动画反向播放（从 100% 到 0%），且每次运行都如此。
- alternate：动画在奇数次正向播放，偶数次反向播放（第一次 normal，第二次 reverse，第三次 normal……）。
- alternate-reverse：与 alternate 相反，第一次反向播放，之后交替正向和反向。
2. 实际用法示例
以下是一个简单的移动动画，演示不同 direction 的效果：
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
.box {
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: 4; / 播放4次 /
}
情况一：animation-direction: normal
每次动画都从左到右移动，重复4次，每次都一样。
情况二：animation-direction: reverse
每次都是从右到左（反向执行 keyframes），连续4次反向播放。
情况三：animation-direction: alternate
第1次：左 → 右
第2次：右 → 左
第3次：左 → 右
第4次：右 → 左
情况四：animation-direction: alternate-reverse
第1次：右 → 左（反向开始）
第2次：左 → 右
第3次：右 → 左
第4次：左 → 右
3. 常见应用场景
这个属性特别适合需要来回运动的动画，比如：
立即学习“前端免费学习笔记（深入）”；
- 呼吸效果（缩放交替）
- 左右摆动的图标
- 进度条往返加载动画
- hover 触发后恢复原状的过渡
结合 animation-iteration-count: infinite 和 alternate，可以实现平滑的来回动画，避免突兀跳回起点。
基本上就这些。掌握 animation-direction 能让你更精细地控制动画节奏和方向，提升界面动效的自然感。不复杂但容易忽略。
