JSFiddle - React, Tailwind, and code Playground

HTML

<div class="static-parent">
    <div class="animated-child animated-one"></div>
    <div class="animated-child animated-two"></div>
</div>

CSS

.static-parent{
    height:10em;
    width:20em;
    background-color:red;
    position:relative;   
    overflow:hidden;
}

.animated-child{
    height:5em;
    width:5em;
    position:absolute;
}

.animated-one{
    -webkit-animation: 5s moving linear infinite; 
    background-color:green;
}

@-webkit-keyframes moving{
    0% {
        left:-5em;
    }
    100% {
        left: -webkit-calc(100% + 5em);
    }
    
}

.animated-two{
    -webkit-animation: 5s moving-two linear infinite;
    -webkit-animation-delay:2s;
    background-color:blue;
    left:-5em;
}

@-webkit-keyframes moving-two{
    0% {
        left:-5em;
    }
    100% {
        left: -webkit-calc(100% + 5em);
    }
    
}