CSS动画如何实现循环播放与往返播放？animation-iteration-count与direction属性详解

CSS动画是前端开发中常用的样式特性，通过配置不同的动画属性可以实现丰富的动态效果，其中循环播放和往返播放是两种非常常见的需求，对应的核心属性分别是animation-iteration-count和animation-direction。

animation-iteration-count属性：控制动画播放次数

animation-iteration-count属性用来定义动画的播放次数，默认值为1，也就是动画只播放一次就停止。它的取值可以是具体的正整数，也可以是关键字infinite表示无限循环播放。

常用取值说明

• 1：默认值，动画播放一次后结束
• 正整数：比如2、3，表示动画播放对应次数后结束
• infinite：表示动画无限循环播放，不会自动停止

代码示例

下面是一个让方块水平移动，播放3次后停止的示例：

/* 定义移动动画 */
@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #409eff;
  /* 动画时长1秒，播放3次 */
  animation: move 1s 3;
  /* 等价于显式设置 */
  /* animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: 3; */
}

对应的HTML结构如下：

<div class="box"></div>

animation-direction属性：控制动画播放方向

animation-direction属性用来定义动画的播放方向，默认值为normal，也就是每次动画都从起始状态播放到结束状态。它有几个常用的取值，其中alternate可以实现往返播放的效果。

常用取值说明

往返播放示例

要实现动画往返播放，需要把animation-direction设置为alternate，同时一般搭配infinite或者大于1的animation-iteration-count使用，否则alternate不会生效。

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box-alternate {
  width: 100px;
  height: 100px;
  background-color: #67c23a;
  /* 动画时长1秒，无限循环，交替往返播放 */
  animation: move 1s infinite alternate;
}

对应的HTML结构：

<div class="box-alternate"></div>

两个属性的搭配使用

实际开发中经常需要同时配置这两个属性来满足需求，比如需要动画播放5次，并且每次播放都往返运动，就可以如下配置：

@keyframes scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

.box-combine {
  width: 100px;
  height: 100px;
  background-color: #e6a23c;
  /* 动画时长0.8秒，播放5次，往返播放 */
  animation: scale 0.8s 5 alternate;
}

这里需要注意，如果animation-iteration-count设置为1，即使animation-direction设置为alternate，动画也只会正向播放一次，因为交替播放需要至少两次播放才能体现效果。

注意事项

• animation-iteration-count的取值不支持负数，负数会被浏览器忽略，使用默认值1
• 当animation-direction设置为alternate或者alternate-reverse时，动画的循环次数计算是正向和反向各算一次，比如设置播放次数为2，实际会正向播放一次，反向播放一次，总共完成一个往返
• 这两个属性都属于animation简写属性的子属性，使用简写时要注意顺序，不过也可以单独声明，单独声明会覆盖简写中的对应配置

总结：实现CSS动画循环播放只需要配置animation-iteration-count为infinite或者对应次数即可，实现往返播放则需要搭配animation-direction的alternate相关取值，两者结合可以满足大部分动画播放的控制需求。

CSS动画animation-iteration-countanimation-direction前端样式动画属性修改时间：2026-06-28 12:24:29