JSFiddle - React, Tailwind, and code Playground

HTML

<div id="backgroundCSS">CSS</div>
<div id="backgroundJS">JS</div>

CSS

#backgroundJS{
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background: red;
}

#backgroundCSS{
    width: 100px;
    height: 100px;
    background: red;
    animation: blinkingBackground infinite;
    animation-duration: 1s;
    /*webkit*/
    -webkit-animation: blinkingBackground infinite;
    -webkit-animation-duration: 1s;
}

@keyframes blinkingBackground {
    16%  {background: red;}
    32%  {background: orange;}
    48%  {background: yellow;}
    64%  {background: green;}
    80% {background: blue;}
    100% {background: purple;}
}

/*webkit*/
@-webkit-keyframes blinkingBackground {
    16%  {background: red;}
    32%  {background: orange;}
    48%  {background: yellow;}
    64%  {background: green;}
    80% {background: blue;}
    100% {background: purple;}
}

JavaScript

var changer = function (elementID, time) {
    var colors = [];
    var colorsNum = 0;
    for (var i = 2; i < arguments.length; i++) {
        colors[i-2] = arguments[i];
    }
    
    setInterval(function() {
        if (colorsNum < colors.length) {
            colorsNum++;
            document.getElementById(elementID).style.backgroundColor = colors[colorsNum];
        } else {
            colorsNum = 0;
            document.getElementById(elementID).style.backgroundColor = colors[colorsNum];
        }
    }, time);
   
};

changer("backgroundJS", 200, "red", "orange", "yellow", "green", "blue", "purple");