JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.jquery.com/~john/ticket/fx-rewrite2/color.js"></script>
<div id="element-id"></div>

CSS

#element-id {
    width: 100px;
    height: 100px;
    background-color: pink;
}

JavaScript

// The array of colours and current index within the colour array
// This array can be hex values or named colours
var colours = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
var currIndex = 0;

// The element to animage the background-color of
var elem = $('#element-id');

// Infinitely animate the background-color of your element
var loop = setInterval(function() {
    elem.animate({
        backgroundColor: colours[currIndex++]
    }, {duration: 999});

    // Set the current index in the colour array, making sure to loop
    // back to beginning once last colour is reached
    currIndex = currIndex == colours.length ? 0 : currIndex;
}, 1000);