const max = 20;

const random = (min,max)=>{
  return Math.random()*(max-min)+min;
}

const blendPlay = (root) => {
  root.addEventListener('animationend', (e) => {
    e.target.remove();

  });
  
  for (let i = 0; i < max; i++){
    const bubble = document.createElement('div');
    bubble.style.setProperty('--x',random(0,100)+'%');
    bubble.style.setProperty('--size',random(1,10)+'em');
    bubble.style.setProperty('--time',random(2,5)+'s');
    bubble.style.setProperty('--to',-random(10,50)+'%');
    root.appendChild(bubble);
  }

}

window.onload = () => {
  const root = document.querySelector('.blend').firstElementChild;
  blendPlay(root);
  setInterval(() => {
    blendPlay(root);
  }, 1000);
  
}