如何在懸停時停止當前位置的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'; 
});