animation-direction用于控制CSS动画播放方向，常用值为normal（正向）、reverse（反向）、alternate（奇次正向偶次反向）和alternate-reverse（奇次反向偶次正向），配合keyframes可实现来回运动等效果，如呼吸灯、轮播图切换和图标hover动效，减少重复代码，提升动画灵活性。
在 CSS 中，animation-direction 属性用于控制动画的播放方向。它常与 @keyframes 配合使用，决定动画是从头到尾、从尾到头，还是交替进行。
1. animation-direction 的常用取值
该属性有几个可选值，最常用的是以下四种：
- normal：默认值，动画按 keyframes 中定义的方向播放（0% → 100%）。
- reverse：反向播放，从 100% 到 0% 运行动画。
- alternate：奇数次正向播放，偶数次反向播放（第1次 normal，第2次 reverse，第3次 normal……）。
- alternate-reverse：奇数次反向播放，偶数次正向播放。
2. 正向与反向的实际用法示例
假设我们有一个简单的移动动画：
@keyframes slide {0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
.animated-box {
width: 50px;
height: 50px;
background: blue;
animation-name: slide;
animation-duration: 2s;
}
此时动画会从左向右移动 200px。我们可以改变 animation-direction 来控制方向：
立即学习“前端免费学习笔记（深入）”；
正向播放（normal）
animation-direction: normal;每次动画都从 0px 移动到 200px。
CPWEB企业网站管理系统2.2 Beta
下载
CPWEB企业网站管理系统（以下称CPWEB）是一个基于PHP+Mysql架构的企业网站管理系统。CPWEB 采用模块化方式开发，功能强大灵活易于扩展，并且完全开放源代码，面向大中型站点提供重量级企业网站建设解决方案。CPWEB企业网站管理系统 2.2 Beta 测试版本，仅供测试，不建议使用在正式项目中，否则发生任何的后果自负。
反向播放（reverse）
animation-direction: reverse;动画从 200px 移回 0px，即反向运行关键帧。
交替播放（alternate）
animation-direction: alternate;animation-iteration-count: 4;
第1次：→ 向右移动
第2次：← 向左移回
第3次：→ 再次向右
第4次：← 再次向左
这种模式适合“来回”运动，比如摆动或呼吸效果。
3. 常见应用场景
使用 animation-direction 可以简化一些动画逻辑，避免重复定义 keyframes。
- 制作呼吸灯效果时，用
alternate实现放大缩小循环。 - 轮播图切换时，反向播放退出动画，使过渡更自然。
- 图标 hover 动效来回变化，无需写两套关键帧。
基本上就这些。合理使用 animation-direction 能减少代码量，让动画更灵活。
