How to return css animation from initial state?

Question

css

There is such an animation (sass)

@keyframes boobon-levitation
  0%
    transform: translateY(0)
  50%
    transform: translateY(-20px)
  100%
    transform: translateY(0)
.body
      animation-name: boobon-levitation
      animation-iteration-count: infinite
      animation-duration: 8s
      animation-timing-function: cubic-bezier(0.68, 0.43, 0.16, 1.32)
      animation-play-state: paused
      .element:hover &
        animation-play-state: running
        animation-iteration-count: infinite

And something like this markup

<div class='element'>
  <div class='body'></div>
</div>

Thus, an element with the body class levitates when hovering over its parent.
Question: How can I SMOOTHLY return div.bodyto the original position when the parent loses hover?

Answer 1

Just recently it was similar . You can access the element, look at its position and animate to the end, or even animate using JS , but it seems to me easier to use the animation as usual, and stop it using an explicit animation-iteration-count , as here - the first click on the element starts animation, and the repeat tells the element to stop the animation at the current iteration. You can practice on cats here .