JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div green" id="div"></div>
<div class="text">
  <h2>testtatsat</h2>
  <h2>fadsfasdfas</h2>
  
</div>

CSS

.div {
    width: 30px;
    height: 20px;
    position: relative;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}
.text {
  position:absolute;
  top:0;
  left:300px;
  display:none;
  animation: fadein 1s ; 
}
.show {
  display:block;
}
@keyframes fadein{
  from {
    top:-20px;
    opacity:0;
  }
  to {
    top:0;
    opacity:1;
  }
}

JavaScript

function moveDiv(div) {
    var left = 0;
    var param = 1;
    function loop () {
    
        update();
        draw();requestAnimationFrame(loop);
        
    }
    function update() {
        left += 1;
        if (left > 300&&left<400) {
            div.style.backgroundColor='black';
            document.getElementsByClassName('text')[0].classList.add('show');
            
        } else if (left>=400&&left<500) {
            div.style.backgroundColor='red';
           
        } else if(left==500){
        	left =0;
          document.getElementsByClassName('text')[0].classList.remove('show');
        }
        
    }
    function draw() {
        div.style.left = left + "px";
        
    }
   loop();
}
moveDiv(document.getElementById("div"));