JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<div class="bottom-left"></div><div class="bottom-right"></div>

CSS

div {
    position : absolute;
    left     : 10px;
    width    : 100px;
    height   : 100px;
}
.bottom-left {
    background-color : yellow;
    top              : 10px;
}
.bottom-right {
    background-color : red;
    top              : 120px;
}

JavaScript

$(function () {

    function run_animation(options) {

        //initialize the count variable if this is the first time running and reset it to zero if there are no more steps
        if (typeof options.count == 'undefined' || options.count >= options.steps.length) {
            options.count = 0;
        }

        options.element.delay(options.steps[options.count].delay).fadeToggle(options.steps[options.count].duration, function () {

            options.count++;

            run_animation(options);
        });
    }

    run_animation({
        element  : $('.bottom-left'),
        steps    : [
            { delay : 1000, duration : 100 },
            { delay : 500, duration : 900 },
            { delay : 3000, duration : 500 }
        ]
    });
    run_animation({
        element  : $('.bottom-right'),
        steps    : [
            { delay : 2000, duration : 200 },
            { delay : 1000, duration : 1800 },
            { delay : 6000, duration : 1000 }
        ]
    });
});