求助：实现SVG圆形stroke动画鼠标悬停重复播放功能

问题分析 #

你当前代码使用animation-fill-mode: forwards让动画停留在最终状态，导致animation-play-state: running无法触发重放——因为动画已经执行完毕并保持在结束帧。要实现每次悬停都重新播放动画，需要先重置动画状态再触发。

解决方案 #

通过CSS类配合JavaScript实现动画重置与重放：

修改后的CSS #

.circle1 {
  fill: none;
  stroke: #000;
  stroke-width: 5px;
  stroke-dasharray: 345;
  stroke-dashoffset: 157.5; /* 动画结束后的最终状态 */
}

/* 动画类：控制从初始到结束的过渡 */
.circle1.animate {
  stroke-dashoffset: 320; /* 动画起始状态 */
  animation: anim 2s linear forwards;
}

@keyframes anim {
  100% {
    stroke-dashoffset: 157.5;
  }
}

新增JavaScript代码 #

const circle = document.querySelector('.circle1');

// 页面加载时自动执行一次动画
circle.classList.add('animate');

// 鼠标悬停时重置并重新播放动画
circle.addEventListener('mouseenter', () => {
  // 移除动画类，恢复到最终状态
  circle.classList.remove('animate');
  // 触发浏览器重绘，确保样式更新生效
  void circle.offsetWidth;
  // 重新添加动画类，启动动画
  circle.classList.add('animate');
});

关键逻辑说明 #

1. CSS拆分状态：将基础样式与动画样式分离，基础样式保持动画结束后的状态，动画类负责定义起始状态和动画规则。
2. JS重置动画：通过移除再重新添加动画类触发动画重放，void circle.offsetWidth用于强制浏览器重绘，避免样式更新被合并导致动画不触发。
3. 保留初始播放：页面加载时自动添加动画类，实现首次自动播放效果。

替代纯CSS方案（局限性） #

如果不想用JS，可尝试使用往返动画，但无法保留结束状态（动画会自动重置），且仅在悬停期间播放：

.circle1 {
  fill: none;
  stroke: #000;
  stroke-width: 5px;
  stroke-dasharray: 345;
  stroke-dashoffset: 157.5;
}

.circle1:hover {
  animation: anim 2s linear forwards;
}

@keyframes anim {
  0% { stroke-dashoffset: 320; }
  100% { stroke-dashoffset: 157.5; }
}

⚠️ 此方案缺点：页面加载时不会自动播放，且动画结束后若未持续悬停，会立即回到初始状态（不符合保留结束状态的需求）。

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