Come interrompere l'animazione css nella posizione corrente al passaggio del mouse?

Question

Ho un div all'interno del quale si muove un altro div. Devo interrompere .block nella posizione corrente quando si passa il mouse su .container. Come farlo?

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

È possibile aggiungere

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

per mettere in pausa l'animazione quando si passa sopra di esso.

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

Answer 2

È possibile mettere in pausa l'animazione quando si hover su .container. Considerate seguente 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'; 
});