无限轮播组件hover加速时出现异常行为的问题排查

直接通过JS修改元素的animationDuration会触发动画重新初始化，两个.first-row元素的动画重置时机存在细微差异，导致它们的滚动进度不同步，视觉上就像出现了两组速度不同的圆形。鼠标悬停/移出时，动画重置的问题会造成“一组消失、一组显示”的错觉。

改用CSS变量统一控制动画时长，修改变量时不会触发动画重置，能保持两组元素滚动同步，实现平滑的加速/减速效果。

修改后的CSS #

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 定义CSS变量，默认动画时长30s */
.moving-circles {
  --animation-duration: 30s;
  overflow: hidden;
  margin: 24px -128px;
  padding: 24px 0;
  white-space: nowrap;
  background: #fff;
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #f80606);
  z-index: 10;
}

.first-row {
  display: inline-block;
  /* 使用CSS变量作为动画时长 */
  animation: var(--animation-duration) slide infinite linear;
}

.first-row a {
  margin: 0 4px;
  text-decoration: none;
}

.first-row span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  height: 120px;
  width: 120px;
  border-radius: 1000px;
  border: 1px solid #000;
  margin: 0 40px;
}

修改后的JS #

var left = document.querySelector(".left");
var carousel = document.querySelector(".moving-circles");

left.addEventListener("mouseover", () => {
  // 修改CSS变量实现加速
  carousel.style.setProperty("--animation-duration", "10s");
})

left.addEventListener("mouseout", () => {
  // 恢复默认动画时长
  carousel.style.setProperty("--animation-duration", "30s");
})

HTML无需修改 #

保持原HTML结构即可。

• 在.moving-circles容器上定义CSS变量--animation-duration，统一控制两个轮播行的动画节奏
• 动画属性使用变量替代固定值，修改变量时不会触发动画重置，确保两组元素滚动完全同步
• JS中不再单独操作两个轮播行，而是通过修改容器的CSS变量实现全局控制，逻辑更简洁

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