css：防止鼠标移出时重置动画？

Question

我有一个动画，我用来制作图像滚动：

.my-image:hover {
    -webkit-animation: my-image-anim 20s linear 0s infinite;
    animation: my-image-anim 20s linear 0s infinite;
}

@-webkit-keyframes my-image-anim {
    0%  { margin-left: 0%; }
    100% { margin-left: -100%; }
}

@keyframes my-image-anim {
    0%  { margin-left: 0%; }
    100% { margin-left: -100%; }
}

当我将鼠标悬停在图像上时，向左滚动。当鼠标离开图像时，动画将重置为margin-left=0。

我希望动画在鼠标退出处停止，然后在鼠标再次进入时恢复。这可能只使用css吗？

Answer 1

是。您想使用animation-play-state。

.my-image{
-webkit-animation: my-image-anim 20s linear 0s infinite;
animation: my-image-anim 20s linear 0s infinite;
animation-play-state: paused;
-webkit-animation-play-state: paused;
}

.my-image:hover{
animation-play-state: running;
-webkit-animation-play-state: running;
}