如何让 CSS 动画在悬停时减速停止，并在鼠标离开时继续无限移动？

Question

我正在尝试使用以下 CSS 样式创建选取框：

@keyframes scroll {
 0% { transform: translateX(0) }
 100% { transform: translate(-100%) }
}
animation: scroll var(--duration) linear infinite;

我想让它放慢速度并在悬停时停止，然后继续循环

onMouseLeave

，但由于每次应用新动画时 css 动画重新计算/重置位置，我似乎无法实现这种效果。

有没有办法达到这个效果？谢谢！

Answer 1

是的，您可以使用 CSS 动画和 JavaScript 来制作效果。我希望这有帮助

const marquee = document.querySelector('.marquee');
marquee.addEventListener('mouseenter', () => {
  marquee.classList.add('paused');
});

marquee.addEventListener('mouseleave', () => {
  marquee.classList.remove('paused');
});

.marquee-container {
  overflow: hidden;
  width: 100%;
}

.marquee {
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.marquee.paused {
  animation-play-state: paused;
}

<div class="marquee-container">
  <div class="marquee">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id dictum ex. Etiam eu velit ullamcorper, tristique nibh vitae, tincidunt massa. Praesent sit amet massa metus. Fusce at neque turpis. Nam ac augue et felis gravida maximus. </div>
</div>