如何修改CSS动画的animation-iteration-count属性且不破坏动画效果？

我有一个CSS边框动画，默认无限循环，希望给目标元素添加status类时，将animation-iteration-count改为1，但修改后动画出现异常。示例代码如下：

HTML #

<div>Hiiiiiiiii!</div>

CSS #

div {
  position: relative;
}

div::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px solid #00849b;
    animation-name: border-animation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

div.status::before {
    animation-name: border-animation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

@keyframes border-animation {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

JS #

setTimeout(() => {
  const e = document.querySelector('div')
  e.classList.add('status')
}, 5000)

问题原因 #

CSS动画一旦启动，浏览器不会主动监听动画属性的变化来实时调整。原动画处于无限循环状态，添加status类后，浏览器不会中断当前的动画周期去应用新的迭代次数，导致动画要么继续无限循环，要么在当前周期结束后表现出不符合预期的行为。

解决方案 #

方案1：重置动画并触发重排

通过先重置动画状态，强制浏览器重排元素，再应用新的动画配置：

修改后的CSS：

div {
  position: relative;
}

div::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px solid #00849b;
    animation: border-animation 1s linear infinite forwards;
}

div.status::before {
    /* 先清空动画，重置初始状态 */
    animation: none;
    width: 0;
    /* 重新应用单次动画 */
    animation: border-animation 1s linear 1 forwards;
}

@keyframes border-animation {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

配合JS触发重排（确保浏览器读取新的动画属性）：

setTimeout(() => {
  const e = document.querySelector('div');
  e.classList.add('status');
  // 触发重排，强制浏览器更新样式
  void e.offsetHeight;
}, 5000);

方案2：直接替换动画配置

简化动画属性的定义，添加类时直接替换整个动画声明，让浏览器自动启动新的单次动画：

修改后的CSS：

div {
  position: relative;
}

div::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* 初始宽度设为0，让动画从起点开始 */
    border-bottom: 2px solid #00849b;
    animation: border-animation 1s linear infinite;
}

div.status::before {
    animation: border-animation 1s linear 1 forwards;
}

@keyframes border-animation {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

这样修改后，添加status类时，浏览器会识别到动画属性被完全替换，从而启动一次新的动画，执行完毕后停留在最终状态。

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