ctf0/css-animation-reverse.md

## css-animation-reverse.md

      
    Raw
  

              css-animation-reverse.md
            
          
    <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)
}