JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.slide-box {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: url(../pics/red.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: slide 5s linear forwards;
}
@keyframes slide {
  0% {
    left: 0;
  }
  20% {
    left: 20%;
  }
  40% {
    left: 40%;
  }
  60% {
    left: 60%;
  }
  80% {
    left: 80%;
  }
  100% {
    left: 100%;
    overflow: hidden;
    opacity: 0;
    display: none;
    visibility: hidden;
  }
}