JSFiddle - React, Tailwind, and code Playground

by David Faber

HTML

<div class="infinitelyLooped"></div>

CSS

.infinitelyLooped {
    background-color: #ffcc00;
    height: 300px;
    width: 300px;
}

JavaScript

$('.infinitelyLooped').on('color1', function () {
    $(this).animate({backgroundColor:'#ffcc00'}, 500, function(){
        $(this).trigger('color2');
    });
});

$('.infinitelyLooped').on('color2', function () {
    $(this).animate({backgroundColor:'#eeeeee'}, 500, function(){
        $(this).trigger('color3');
    });
});

$('.infinitelyLooped').on('color3', function () {
    $(this).animate({backgroundColor:'#3b5998'}, 500, function(){
        $(this).trigger('color1');
    });
});

// Kick-off the infinite loop by firing one of the events
$('.infinitelyLooped').trigger('color2');