Animation-Iteration-Count与animation-fill-mode冲突问题求助

你的问题核心在于CSS动画默认每次迭代都会替换之前的变换状态，而非叠加，所以即便设置了forwards，也只会保留最后一次迭代的100px位移，而非两次的累加结果。下面提供两种无需JavaScript的纯CSS解决方案，均支持给不同元素设置不同迭代次数：

方法一：使用animation-composition实现变换叠加 #

这个属性可以控制动画的合成方式，将默认的replace（替换）改为add（叠加），让每次迭代的位移效果累积：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  --iterations: 2; /* 修改此值可调整重复次数，不同元素可单独设置 */
  --step-move: 100px; /* 每次迭代的移动距离 */
  animation: move 2s var(--iterations) forwards;
  animation-composition: add; /* 关键：让每次动画的transform叠加生效 */
}

@keyframes move {
  to {
    transform: translateX(var(--step-move));
  }
}

原理：第一次迭代后元素位移100px，第二次迭代会在这个基础上再叠加100px，最终停在200px位置，forwards会保留该最终状态。主流浏览器（Chrome、Firefox、Edge）均已支持该属性。

方法二：使用steps()分步动画（兼容性更优） #

若需兼容更早版本的浏览器，可通过steps()时间函数配合calc()计算总位移，将动画拆分为多个分步移动：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  --iterations: 2; /* 重复次数 */
  --step-move: 100px; /* 每次移动距离 */
  animation: move 2s forwards;
  animation-timing-function: steps(var(--iterations), end); /* 按次数拆分动画阶段 */
}

@keyframes move {
  to {
    transform: translateX(calc(var(--step-move) * var(--iterations)));
  }
}

原理：steps(2, end)会把2秒的动画拆分为两个1秒的阶段，每个阶段直接跳转到对应比例的位移位置，最终停在总位移200px处，效果和分步移动完全一致。

两种方法都可通过修改自定义属性--iterations和--step-move，快速给不同元素配置不同的动画参数，全程无需JavaScript。

内容的提问来源于stack exchange，提问作者Sameer R