如何将CSS倒计时环动画重置至初始状态？

常见失效原因 #

直接移除/添加动画类时，浏览器会合并DOM操作，不会触发动画重新执行；或者未强制触发浏览器重排，导致动画状态未被重置。

可行方案 #

方案1：强制DOM重排后重新应用动画

这是最常用且稳定的方法，核心是让浏览器在移除动画类后完成一次重排，再重新添加类。

假设你的基础代码结构如下：
HTML

<div class="countdown-ring animate"></div>
<button id="reset-btn">重置倒计时</button>

CSS

.countdown-ring {
  width: 120px;
  height: 120px;
  border: 6px solid #e0e0e0;
  border-radius: 50%;
  position: relative;
}

.countdown-ring::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 100%;
  height: 100%;
  border: 6px solid #2196F3;
  border-radius: 50%;
  clip: rect(0, 120px, 120px, 60px);
  transform: rotate(0deg);
}

.animate::after {
  animation: countdown-rotate 10s linear forwards;
}

@keyframes countdown-rotate {
  to {
    transform: rotate(360deg);
  }
}

重置JavaScript函数

const resetBtn = document.getElementById('reset-btn');
const countdownRing = document.querySelector('.countdown-ring');

resetBtn.addEventListener('click', () => {
  // 1. 移除动画类
  countdownRing.classList.remove('animate');
  
  // 2. 强制触发浏览器重排（读取任意布局属性即可）
  void countdownRing.offsetHeight;
  
  // 3. 重新添加动画类
  countdownRing.classList.add('animate');
});

方案2：克隆元素替换原节点

通过克隆原元素并替换，让新元素以初始状态加载动画，适合复杂动画场景：

resetBtn.addEventListener('click', () => {
  const newRing = countdownRing.cloneNode(true);
  countdownRing.parentNode.replaceChild(newRing, countdownRing);
  
  // 若原元素绑定了事件，需重新绑定到新元素
});

方案3：结合自定义属性与动画状态控制

通过CSS自定义属性控制动画起始值，配合animation-play-state重置：
修改后的CSS

.countdown-ring::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 100%;
  height: 100%;
  border: 6px solid #2196F3;
  border-radius: 50%;
  clip: rect(0, 120px, 120px, 60px);
  transform: rotate(var(--rotate-deg, 0deg));
}

.animate::after {
  animation: countdown-rotate 10s linear forwards;
}

@keyframes countdown-rotate {
  to {
    --rotate-deg: 360deg;
  }
}

重置函数

resetBtn.addEventListener('click', () => {
  // 重置自定义属性
  countdownRing.style.setProperty('--rotate-deg', '0deg');
  
  // 移除并重新添加动画类，配合重排触发
  countdownRing.classList.remove('animate');
  void countdownRing.offsetHeight;
  countdownRing.classList.add('animate');
});

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