JSFiddle - React, Tailwind, and code Playground

HTML

<div><span id="black">Waiting for the task!</span><span id="red">Waiting for the task!</span></div>

CSS

#black{
    color:black;
    font-weight:bold;
    font-size:2em;
}
#red {
    position:absolute;
    z-index:10;
    left:0px;
    width:0px;
    overflow:hidden;
    font-weight:bold;
    font-size:2em;
    color:red;
    white-space:nowrap;
}

div {
    display: inline-block;
    position: relative;
}

html {
    text-align: center;
}

JavaScript

var red = document.getElementById('red');
    red.style.width = "0px";

var black = document.getElementById('black');

var pauser = 0;
var animation = setInterval(function(){
    if(red.style.width == "288px"){
        pauser += 34;
        
        if (pauser >= 1000){
            red.style.width = "0px";
            pauser = 0;
        }
    } else {
        red.style.width = parseInt(red.style.width,10)+1 +"px";
    }
}, 30);