как приостановить анимацию css при зависании с помощью jquery

Как мы приостанавливаем анимацию 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

 

JAVASCRIPT

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

моя ссылка jsfiddle здесь https://jsfiddle.net/gamss0wa/6/