https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover/52238484#

<div class="item">ABC</div>

@keyframes spin {
    0% {
        transform: translate(0, 0) scale(1) rotateY(0deg);
    }

    100% {
        transform: translate(4rem, 4rem) scale(4) rotateY(540deg);
    }
}

.item {
    &.active {
        animation: spin 1s forwards;
        animation-timing-function: ease-in-out;
    }

    &.in-active {
        animation-direction: reverse
    }
}

let item = document.querySelector('.item')

// play normal
item.addEventListener('mouseover', () =>{
  item.classList.add('active')              
})

// play in reverse
item.addEventListener('mouseout', () =>{
  item.style.opacity = 0 // avoid showing the init style while switching the 'active' class
  
  item.classList.add('in-active')
  item.classList.remove('active')
  setTimeout(() => {
      item.classList.add('active')
      item.style.opacity = ''
  }, 5)

  item.addEventListener('animationend', onanimationend)
})

function onanimationend() {
    item.classList.remove('active', 'in-active')
    item.removeEventListener('animationend', onanimationend)
}

ctf0/css-animation-reverse.md