JSFiddle - React, Tailwind, and code Playground

CSS

.cercleAnime {
    border: 3px solid black;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position:absolute;
}

JavaScript

function getRandom(min, max) {
        return Math.floor((Math.random()*max)+min);
    }
    function generateCircle(leftPos, topPos, zIndex) {
        $circle = $('<div class="cercleAnime"></div>');
        $('body').append($circle);
        var self = this;
        self.leftPos = leftPos;
        self.topPos = topPos;
        $circle.css({
            'left' : self.leftPos+'px',
            'top' : self.topPos+'px',
            'z-index' : zIndex
        });
        $circle.animate({'width' : '100%', 'height' : '100%'}, {
            duration : 300,
            progress: function() {
                newLeft = self.leftPos - $(this).width()/2;
                newTop = self.topPos - $(this).height()/2;

                $(this).css({
                    'left' : newLeft+'px',
                    'top' : newTop+'px'
                })
            },
            done: function() {
                $(this).remove()
            }
        } );
    }
    function generateCircles(numberOfCircles, intervalBetweenCircles) {
        leftPos = getRandom(1,300);
        topPos = getRandom(100,400);
        zIndex = 1000;
        timeoutTime = intervalBetweenCircles;
        for(var i = 0; i < numberOfCircles; i++) {
            zIndex--;
            setTimeout(function(){generateCircle(leftPos, topPos, zIndex)}, timeoutTime);
            timeoutTime += intervalBetweenCircles;
        }
    }
    $(function() {
        generateCircles(13, 500);
        generateCircles(13, 500);
        generateCircles(13, 500);
        generateCircles(13, 500);
    });