JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="container">
  <img class="arrow-horizontal" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fios7%2FArrows%2Flong_arrow_right1600.png&f=1&nofb=1" />

</div>


<!-- <img class="rotate arrow-vertical" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fios7%2FArrows%2Flong_arrow_right1600.png&f=1&nofb=1" /> -->

CSS

@keyframes arrow-horizontal {
  from {
    left: 0px;
    opacity: 0%;
  }

  50% {
    opacity: 100%;
  }

  to {
    left: 400px;
    opacity: 0%;
  }
  

}

@keyframes arrow-vertical {
  from {
    top: 0px;
  }

  to {
    top: 400px;
  }
}

.arrow-horizontal {
  width: 300px;
  animation: arrow-horizontal 3s infinite;
  animation-iteration-count: 5;
  position: relative;
  opacity: 0%;
}

.arrow-vertical {
  height: 300px;
  animation: arrow-vertical 3s infinite;
  position: relative;
}

.rotate {
  transform: rotate(90deg);
}

.container {
  position: absolute;
  right: 0;
  padding-right: 400px;
  overflow: hidden;
}