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

Question

我有一个div里面移动另一个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

Answer 1

您可以添加

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

，当你将鼠标悬停在它暂停动画。

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

Answer 2

您可以暂停动画当.container悬停。考虑下面的CSS：

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

DEMO

Answer 3

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'; 
});