JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- -->

CSS

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}

div {
  height: 1000px;
  width: 1000px;
  background-color: black;
  border-radius: 50%;
  top: 250px;
  right: 10px;
  left: 800px;
}

.animate {
  -webkit-animation: expand 1000s;
}

@-webkit-keyframes expand {
  0% {
    -webkit-transform: scale(0, 0);
  }
  100% {
    -webkit-transform: scale(100, 100);
    display: none;
  }
}

JavaScript

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

function makeDiv(colorChoice) {
  var divsize = 1000;
  var color = colorChoice;
  console.log(color);
  $newdiv = $('<div/>').css({
    'width': divsize + 'px',
    'height': divsize + 'px',
    'background-color': color,
    'transform': 'scale(0)'
  });

  var posx = (Math.random() * ($(document).width()) - (divsize / 2)).toFixed();
  var posy = (Math.random() * ($(document).height()) - (divsize / 2)).toFixed();
  $newdiv.css({
    'position': 'absolute',
    'left': posx + 'px',
    'top': posy + 'px',
    'border-radius': '50%',
    'display': 'none'
  }).appendTo('body').addClass('animate').css({
    'display': 'block'
  }).one(animationEnd, function() {
    $(this).remove();
  });
};
var id = setInterval(function() {
  makeDiv('black')
}, 5000);