होवर पर वर्तमान स्थिति में सीएसएस एनीमेशन कैसे रोकें?

Question

मेरे पास एक div है जिसमें एक और div चलता है। जब मैं .container पर होवर करता हूं तो मुझे वर्तमान स्थिति पर .block को रोकने की आवश्यकता है। यह कैसे करना है?

HTML:

<div class="container"> 
    <div class="block"></div> 
</div> 

सीएसएस:

.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 पर मंडराना। सीएसएस निम्नलिखित पर विचार करें:

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

DEMO

Answer 3

सीएसएस:

.container:hover > .block { 
    -webkit-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -o-animation-play-state:paused; 
    animation-play-state:paused; 
} 

जे एस:

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