How to stop playing css animation on hover?

Question

css

Hello, tell me, does the object have an infinite preserve-3d animation, it rotates in a calm state .. when hovering, another 3d animation is launched by keyframes, respectively, they are played simultaneously, how to stop the animation on hover, leaving the object in its current position and apply the hover effect, and when out, play the animation of returning to the original point and start a new free animation?

The return, as I understand it, is done through a transition in duration equal to the delay of the first animation - is that correct?

Let's describe an example, the div moves endlessly from left to right and back again... on hover it should start moving up and down from the position it was at the time of the hover, as we remove the cursor, it returns to the original 0 position and the first animation starts again to the left and to the right.

Answer 1

.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 Will you understand
further?

Answer 2

animation-play-state: paused;
Example https://jsfiddle.net/atmxqhjk/

Answer 3

animation-play-state: paused;