CSS动画的方向如何设置_animation-direction属性详解

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); }
}
<p>.box {
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: 4; /<em> 播放4次 </em>/
}</p>

情况一：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. 常见应用场景

这个属性特别适合需要来回运动的动画，比如：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

立即学习“前端免费学习笔记（深入）”；

• 呼吸效果（缩放交替）
• 左右摆动的图标
• 进度条往返加载动画
• hover 触发后恢复原状的过渡

结合 animation-iteration-count: infinite 和 alternate，可以实现平滑的来回动画，避免突兀跳回起点。

基本上就这些。掌握 animation-direction 能让你更精细地控制动画节奏和方向，提升界面动效的自然感。不复杂但容易忽略。

以上就是CSS动画的方向如何设置_animation-direction属性详解的详细内容，更多请关注php中文网其它相关文章！