explosion animation on pic with javascript and css

function throwCircles() {
  const cube = document.querySelector('.cube');
  cube.classList.add('throw-animation');

  setTimeout(() => {
    for (let i = 0; i < 2; i++) {
      const circle = document.createElement('div');
      circle.classList.add('circle');
      circle.style.top = '50%';
      circle.style.left = '50%';
      document.body.appendChild(circle);

      setTimeout(() => {
        circle.style.transform = `translate(${i * 58}px, ${i * -48}px)`;
        circle.style.opacity = '1';
      }, 200 * i);
    }
  }, 1000);
}

.container {
  position: relative;
  perspective: 800px;
}

.cube {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transition: all 1s;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0.8;
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: translateZ(-50px);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: blue;
  border-radius: 50%;
  opacity: 0;
  transition: all 1s;
}

<div class="container">
  <div class="cube"></div>
</div>
<button onclick="throwCircles()">Throw Circles</button>