JSFiddle - React, Tailwind, and code Playground

HTML

<div class="play">play<div>
    
<div id="productimage">animate</div>

CSS

.play
{
    width: 100px;
    height: 100px;
    background: yellow;
}
#productimage
{
    width: 100px;
    height: 100px;
    background: red;
    margin-left: 250px;
}
.step1
{
    background: blue;
}
.step2
{
    background: green;
}
.step3
{
    background: orange;
}
.step4
{
    background: black;
}
.step5
{
    background: red;
}

JavaScript

var delay = 0;

for(var i = 0; i<=5; i++){

    setTimeout(function(){
        $('#productimage').addClass('step' + (i+1));
    },delay);

    delay += 2500;
}