JSFiddle - React, Tailwind, and code Playground

by cuttlefish

HTML

<div class="marquee">
  <img src="https://placehold.jp/150x150.png">
</div>

CSS

@keyframes marquee {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.marquee {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.marquee::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #f00;
  animation-name: marquee;
  animation-timing-function:ease;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.marquee img {
  display: block;
}