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

Question

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

\n

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

\n

我想让它减慢速度并在悬停时停止，然后继续循环onMouseLeave，但由于每次应用新动画时CSS动画重新计算/重置位置，我似乎无法实现此效果。

\n

有没有办法达到这个效果？\xc2\xa0谢谢\xc2\xa0you！

\n

Answer 1

您可以切换父组件的animation-play-state: pause选取框的。:hover

animation-play-state CSS 属性设置动画是运行还是暂停。

当选取框暂停时，您可以transform: translateX();为:hover您可以控制的父对象设置动画，使其感觉选取框正在减速直至停止。

当:hover被移除时，DOM 将恢复 Marquee 动画，父包装器的组合translate返回到 0。

这是我正在谈论的一个工作示例：

.container {
     --duration: 20s;
     height: 100px;
     background: red;
     transform: translateX(0);
     transition: calc(var(--duration) * .1) ease-out;
}
 .container h1 {
     display: inline-block;
     width: max-content;
     animation: scroll var(--duration) linear infinite;
}
 .container:hover {
     transform: translateX(-20%);
}
 .container:hover h1 {
     animation-play-state: paused;
}
 @keyframes scroll {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translate(-100%);
    }
}
 

<div class="container">
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum nulla ut nibh vulputate egestas.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum nulla ut nibh vulputate egestas.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum nulla ut nibh vulputate egestas. </h1>
</div>