JSFiddle - React, Tailwind, and code Playground

HTML

<div></div><div class="one"></div><div class="two"></div>

CSS

@keyframes marquee {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    45% {
        transform: translate3d(-100vw, 0, 0);
        opacity: 1;
    }
    45.1% {
        opacity: 0; /* at this point in time the element is fully on the left and hidden */
    }
    55% {
        transform: translate3d(100vw, 0, 0);
        opacity: 0; /* at this point in time the element is fully on the right but still hidden */
    }
    55.1% {
        opacity: 1; /* now we make it visible again so that it can come back into view */
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}
div {
    width: 200px;
    height: 50px;
    background: red;
    position: absolute;
    left: 50%;
    top: 15px;
    animation: marquee 5s linear infinite;
}

.one {
  left: 100
}

body {
    overflow: hidden;
}