JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="slide-box" id="slide-box""></div>
</div>

CSS

.slide-box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 3s linear 1;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
}
.animationEnd {
  opacity: 0;
}
@keyframes slide {
  0% {
    left: 0;
  }
  20% {
    left: 20%;
  }
  40% {
    left: 40%;

  }
  60% {
    left: 60%;

  }
  80% {
    left: 80%;
  }
  100% {
    left: 100%;
  }
}

JavaScript

const animationEnd = () => {
		let slideBox = document.getElementById('slide-box');
    let slideClass = slideBox.getAttribute('class');
    slideBox.setAttribute('class', slideClass + ' animationEnd');
};

let animEndEvent = new Event('animation_end');

if (document.addEventListener) {
    document.addEventListener('animation_end', animationEnd, false);
} else {
    document.attachEvent('animation_end', animationEnd);
}

setTimeout(() => {
		document.dispatchEvent(animEndEvent);
}, 3000);