CSS balls

<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>

.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
  margin: 30px auto;
  background: radial-gradient(circle at 10px 10px, red, #555);
  border: 1px solid #000;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.8);
  transition: height 1s ease-out, width 1s ease-out, opacity 3s ease-in;
  opacity: 1;
  position: relative;
}

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.shrink {
  height: 0px;
  width: 0px;
  border: none;
  opacity: 0;
}

function getBalls() {
  return Array.from(document.getElementsByTagName('span'));
}

function injectNewBall() {
  const ball = document.createElement('span');
  ball.classList.add('ball', 'shrink');
  document.body.appendChild(ball);
  setupNewBall(ball);
  window.requestAnimationFrame(() => ball.classList.remove('shrink'));
}

function shakeBalls() {
  const balls = getBalls();
  return balls.map(ball => {
    return new Promise(function(resolve) {
      ball.addEventListener('animationend', e => {
        const { target } = e;
        target.classList.remove('shake');
        resolve();
      });
      ball.classList.add('shake');
    });
    
  });
}

function setupNewBall(ball) {
  ball.addEventListener('click', e => {
    const { target } = e;
    target.addEventListener('transitionend', () => {
      Promise.all(shakeBalls()).then(() => {
        injectNewBall();
        target.parentNode.removeChild(target);
      });
    });
    target.classList.add('shrink');
  });
}

getBalls().forEach(ball => { setupNewBall(ball) });