JSFiddle - React, Tailwind, and code Playground

HTML

<div id="backgroundCSS">CSS</div>
<div id="backgroundJQ">JQ</div>

CSS

#backgroundJQ{
    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

//plugin
(function($) { 
    $.fn.bgChanger = function(duration) {
        var $this = this;
        var args = arguments;
        var i = 1;
        (function repeater(){
            if (i !== args.length) {
                $this.css("background", args[i]);
                ++i;
            } else {
                i = 1;
                $this.css("background", args[i]);
            }         
            setTimeout(repeater, duration);   
        })();
        return this;
    }; 
}(jQuery));


//pouziti
$("#backgroundJQ").bgChanger(300, "red", "orange", "yellow", "green", "blue", "purple");