jqueryを使用してホバー上でCSSアニメーションを一時停止する方法

Question

CSSアニメーションを、ユーザーが要素を移動させたときの状態で一時停止するにはどうすればいいですか？

CSS

.container { 
    height: 160px; width: 450px; background: gray; overflow: hidden; 
} 
.marquee { 
    height: 140px; width: 400px; margin: 10px; background: red; position: relative; animation: marquee 10s linear infinite; 
} 

@keyframes marquee { 
    0% {left: 100%;} 
    100% {left: -100%;} 
} 

.marquee:hover { 
    /* pause animation. this works but with compatibility issues 
    animation-play-state is still in W3C working draft 
    */ 
    animation-play-state: paused; 
} 

HTML

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

JAVASCRIPT

$(document).raedy(function() { 
    $(.marquee).hover { //mouseenter() & mouseleave() 
     // puase animation 
    } 
}); 

ここで私のjsfiddleリンクhttps://jsfiddle.net/gamss0wa/6/

Answer 1

あなたはCSSに

.marquee:hover 
{ 
    -webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 
}