Как приостановить 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

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

JAVASCRIPT

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

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

Ответы на вопрос(1)

Решение Вопроса

Вы можете приостановить анимацию, используя CSS

.marquee:hover 
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
 Brian Luna20 июн. 2016 г., 06:44
Я просто боюсь использовать ваше решение для проблемы совместимости.
 Brian Luna20 июн. 2016 г., 06:42
приятно спасибо я не знал, что css animation-play-state существует.
 Hiral Suvagya20 июн. 2016 г., 06:45
то же самое css анимация будет работать в браузере, тогда animation-play-состояние будет работать иначе
 Brian Luna20 июн. 2016 г., 06:51
на основе этой информации анимация-состояние воспроизведения еще не стандартизировано, см. здесьdeveloper.mozilla.org/en/docs/Web/CSS/...

Ваш ответ на вопрос