JSFiddle - React, Tailwind, and code Playground

HTML

<div id="animate">
<div id="animated" class=""></div>
</div>

CSS

#animate { width: 500px; height: 100px; background: blue; position: absolute; }
#animated { width: 100px; height: 100px; background: red; position: absolute; top: 0; left: 0; }

.animating #animated {
    -webkit-transition: left 5s ease-in-out;
    -moz-transition: left 5s ease-in-out;
    -o-transition: left 5s ease-in-out;
    -ms-transition: left 5s ease-in-out;
    transition: left 5s ease-in-out;
}

.animating-fast #animated {
    -webkit-transition: left 200ms ease-in-out;
    -moz-transition: left 200ms ease-in-out;
    -o-transition: left 200ms ease-in-out;
    -ms-transition: left 200ms ease-in-out;
    transition: left 200ms ease-in-out;
}

.new #animated {
 left: 400px;   
}

JavaScript

window.setTimeout( function () {
    document.documentElement.className += " animating";
document.documentElement.className += " new";

var anim = document.getElementById( "animated" );

window.setTimeout( function () {
   document.documentElement.className = document.documentElement.className.replace( "new", "" );
    document.documentElement.className = document.documentElement.className.replace( "animating", "animating-fast" );
    window.setTimeout( function () {
      document.documentElement.className += " new";        
    }, 1 );
}, 2000 );
    
    
}, 500 );