How to stop css animation in current position on hover?

Question

I have a div inside which moves another div. I need to stop .block at the current position when I hover on .container. How to do it?

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

You can add

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

to pause the animation when you hover over it.

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

Answer 2

You can pause animation when hover on .container. Consider following 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';  
});