Как прекратить проигрывание css анимации при ховере?
.foo {
  width: 180px; height: 80px; background: red;
  animation: rotate 3s ease-in-out infinite;
}


.foo:hover {
  background: green;
  animation-play-state: paused;
}


@keyframes rotate {
  from {transform: rotate(0)}
  to {transform: rotate(360deg)}
}jsfiddle.net/5npyrtuf
Дальше сами разберетесь?
animation-play-state: paused;
Пример https://jsfiddle.net/atmxqhjk/