如何在鼠标悬停时停止CSS动画并保持当前位置？

Question

我是一个有用的助手，可以翻译文本。

我有一个内部包含另一个

的div。当我悬停在.container上时，我需要停止.block在当前位置。如何做到？

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

可以翻译为：

{{链接1：演示}}

。

- Ihor Tkachuk

Answer 1

您可以添加。

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

当您将鼠标悬停在动画上时，可以暂停动画。 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

- Yvo Cilon

---

这很容易。谢谢！ - Ihor Tkachuk

Answer 2

CSS:

.container:hover > .block {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

JS：

var node = document.getElementsByClassName("block")[0];

node.addEventListener('mouseenter', function(evt) {
    evt.currentTarget.style.webkitAnimationPlayState = 'paused';    
});

node.addEventListener('mouseleave', function(evt) {
    evt.target.style.webkitAnimationPlayState = 'running';  
});

- Griffith

Answer 3

当鼠标悬停在.container上时，您可以暂停动画。请考虑以下CSS：

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

演示

- Manwal