JSFiddle - React, Tailwind, and code Playground

CSS

#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%);
transition: margin 1s ease-in-out;}
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }

.anim{
    -webkit-transition: margin 1s ease-in-out;
    -moz-transition: margin 1s ease-in-out;
    -o-transition: margin .4s ease-in-out;
    -ms-transition: margin .4s ease-in-out;
    transition: margin 1s ease-in-out;
}

JavaScript

function run(interval, frames) {
    var int = 1;
    
    function func() {
        document.body.id = "b"+int;
        document.body.classname = "anim";
        int++;
        if(int === frames) { int = 1; }
    }
    
    var swap = window.setInterval(func, interval);
}

run(3000, 10); //milliseconds, frames