Wie stoppe CSS Animation in der aktuellen Position bei Hover?

Question

Ich habe ein div in dem sich ein anderes div bewegt. Ich muss .block an der aktuellen Position stoppen, wenn ich auf .container schweben. Wie es geht?

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

Sie hinzufügen können

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

die Animation pausieren, wenn Sie den Mauszeiger über sie.

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

Answer 2

Sie können Animation anhalten, wenn schweben auf .container. Betrachten Sie folgende 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'; 
});