JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-content">
<div id="ball1"> </div>
<div id="ball2" class="bubble"> </div>
<div id="ball3" > </div>
<div id="logo"></div>

<div id="ball4" > </div>
<div id="ball5" class="bubble" > </div>
<div id="ball6"> </div>
<div id="ball7" class="bubble" > </div>
<!--End Ball-->

 </div><!--End Header-content-->

CSS

#ball1, #ball5, #ball7 { background:url(http://www.dblsportsagency.com/wp-content/themes/DBLv2/gfx/ball1.png) no-repeat; width:60px; height:60px; z-index:1; }
#ball1 { margin:-70px 0 0 205px; top:10px; float:left; }
#ball2 { background:url(http://www.dblsportsagency.com/wp-content/themes/DBLv2/gfx/ball2.png) no-repeat; width:75px; height:75px; margin:-75px auto; z-index:1; }
#ball3, #ball4 { background:url(http://www.dblsportsagency.com/wp-content/themes/DBLv2/gfx/ball.png) no-repeat; width:25px; height:25px; }
#ball3 { margin:125px 0 0 85px; top:10px; float:left; z-index:1; display:inline; }

JavaScript

/*---Start Bounce---*/
// Bouncer animation (by Leo Xavier)
// BASE SPEED OF BOUNCING. WILL ADD RAINDOM 0-100 TO UNSYNC BOUNCING
var bouncespeed = 450;

// ACTUAL BOUNCER. CALLBACK OF ANIMATION IS THE BOUNCER ITSELF, TO LOOP ALL NIGHT LONG

function bounce(currentA) {
    newx = Math.floor(10 * Math.random());
    newy = Math.floor(3 * Math.random());
    newspeed = bouncespeed + Math.floor(10 * Math.random());
    $(currentA).animate({
        backgroundPosition: newx + 'px ' + newy + 'px'
    }, newspeed, 'linear', function() {
        bounce(currentA);
    });
}
// SELECT ALL A'S EXCEPT... RESET BG-POSITION TO AVOID INITIAL POSITION BUG AND CALL BOUNCER
$('.bubble').each(

function() {
    $(this).css({
        backgroundPosition: '5px 5px'
    });
    bounce(this);
});


/*---End Bounce---*/