Как сделать плавную анимацию назад

Question

есть анимация которая по сути работает но столкнулся с ошибкой что анимация при повторном нажатие переходит в начало без плавности. Хотелось бы что бы при повторном нажатие анимация была такой же только переходило в состояние 0%. Заранее спасибо

const menuBody = document.querySelector('.animation');
document.addEventListener("click", menu);

function menu(event) {
  if (event.target.closest('.menu__link-arrow')) {
    menuBody.classList.toggle('_active');
  }
  if (!event.target.closest('.menu__link-arrow')) {
    menuBody.classList.remove('_active');
  }
}

.animation._active .menu__link-arrow {
  animation: animatio 2s ease forwards;
}

@keyframes animatio {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(150%) rotate(-180deg);
  }
  100% {
    transform: translateX(150%) rotate(-180deg);
  }
}

<ul class="menu__list-bottom">
  <li class="menu__item-bottom menu__button left"><a href="" class="menu__link-bottom" data-popup="#popup">Вход</a>
    <a href="" class="_icon-log" data-popup="#popup"></a>
  </li>
  <li class="menu__item-bottom right animation">
    <p class="menu__link-bottom menu__link-bottom-burger">RU</p>
    <p class="menu__link-bottom menu__link-bottom-burger hidden">EN</p>
    <p class="menu__link-bottom menu__link-bottom-burger hidden">KZ</p>
    <p class="menu__link-arrow _icon-arrows"></p>
    </a>

  </li>
</ul>

БЛОГ НА HUSL

Как сделать плавную анимацию назад

Ответы (0 шт):