Как вернуть css анимацию с начальное состояние?

Question

[Сергей Гурджиян]

Есть такая анимация (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

И примерно такая разметка

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

Таким образом элемент с классом body леветирует при наведении на родителя.
Вопрос: Как можно ПЛАВНО вернуть div.body в первоначально положение когда родитель теряет hover?

Answer 1

[Kovalsky]

Как раз недавно было похожее. Можно обращаться к элементу, смотреть его положение и доанимировать до конца, или вообще анимировать с помощью JS, но мне кажется проще использовать анимацию как обычно, а останавливать её с помощью явного указания animation-iteration-count, как здесь - первый клик по элементу стартует анимацию, а повторный сообщает элементу, что анимацию следует остановить на текущей итерации. Потренироваться на кошках можно здесь.