JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
</div>

SCSS

#container {
    position: relative;
    border: 1px solid #000;
    width: 200px;
    height: 100px;;
    overflow: hidden;
}

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    animation-fill-mode: forwards;
}

#box1 {
    background: #000;
    animation: slide-in 5s cubic-bezier(.3,1,.5,1) infinite;
}

#box2 {
    background: #f00;
    animation: slide-out 5s cubic-bezier(.5,0,.7,0) infinite;
}

@keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    29.99999% {
        transform: translateX(50%);
    }
    30%, 100% {
        transform: translateX(-100%);
    }
}

@keyframes slide-out {
    0%, 29.99999% {
        transform: translateX(-100%);
    }
    30%, 70% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(200%);
    }
}