如何在悬停时停止当前位置的CSS动画？

Question

我有一个div里面移动另一个div..block当我悬停在上面时,我需要停在当前位置.container.怎么做？

HTML:

<div class="container">
    <div class="block"></div>
</div>

CSS:

.container {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    position: relative;
}

.block {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    animation: move 2s linear infinite;
}

@keyframes move {
    0% { left: 10px; }
    25% { left: 50px; }
    50% { left: 100px; }
    75% { left: 50px; }
    100% { left: 10px; }
}

DEMO

Answer 1

你可以加

.block:hover
{
    animation-play-state: paused;
}

将鼠标悬停在动画上时暂停动画.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state