嘿，这个需求挺有意思的——要让动画每一轮迭代都变慢，单纯靠原生CSS的animation-duration确实搞不定，因为它只能设置整个动画循环的固定时长，没法针对每一次迭代单独调整。不过我们可以结合CSS变量和JavaScript来轻松实现这个效果，下面是具体方案：

核心思路 #

我们用CSS变量来动态控制动画时长，然后通过JavaScript监听动画的animationiteration事件（每次动画迭代结束时触发），每次触发就更新CSS变量的值，让时长逐步增加，直到完成指定的迭代次数。

完整实现代码 #

CSS 部分 #

首先修改你的CSS，用CSS变量替代固定的动画时长：

.shoot-bullet {
  /* 初始时长设为150ms，用CSS变量存储 */
  --animation-duration: 150ms;
  animation: shoot-bullet var(--animation-duration) linear;
  animation-iteration-count: 8;
  /* 可选：保持最后一帧状态 */
  animation-fill-mode: forwards;
}

@keyframes shoot-bullet {
  0% {
    transform: scale(1.8, 0.8);
  }
  100% {
    transform: scale(1, 1);
  }
}

JavaScript 部分 #

然后添加JS代码来监听迭代事件，动态更新时长：

// 获取目标元素
const bulletElement = document.querySelector('.shoot-bullet');
// 初始时长和每次递增的数值
let currentDuration = 150;
const increment = 50;
// 记录已完成的迭代次数
let iterationCount = 0;

// 监听动画迭代事件
bulletElement.addEventListener('animationiteration', () => {
  iterationCount++;
  // 未达到8次迭代时，更新时长
  if (iterationCount < 8) {
    currentDuration += increment;
    bulletElement.style.setProperty('--animation-duration', `${currentDuration}ms`);
  }
});

额外说明 #

• 每次动画迭代结束时，animationiteration事件会触发，我们在这里将当前时长增加50ms，再通过setProperty更新CSS变量；
• 因为animation-iteration-count设为8，第7次迭代结束后更新的时长会用于第8次动画，之后就停止更新；
• 如果需要非线性递增（比如时长翻倍增长），只需要修改currentDuration的计算逻辑即可。

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