Why, if the animation has not ended, do the circles appear immediately?

Question

css

If you click on the button before the end of the previous animation, the next circle appears instantly why??

function showCircle(radius) {
    let div = document.createElement('div');
    div.style.width = 0;
    div.style.height = 0;
    div.style.left = Math.round( document.documentElement.clientWidth * Math.random() )+ 'px';
    div.style.top = Math.round( document.documentElement.clientHeight * Math.random() ) + 'px';
    div.className = 'circle';
    document.body.append(div);

    setTimeout(() => {
      div.style.width = radius * 2 + 'px';
      div.style.height = radius * 2 + 'px';
    }, 0);
  };

Функция создания круга в рандомной области

  button.onclick = go

  function go() {
    showCircle(150)
  }

.circle {
      transition-property: width, height, margin-left, margin-top;
      transition-duration: 2s;
      position: fixed;
      transform: translateX(-50%) translateY(-50%);
      background-color: red;
      border-radius: 50%;
    }

<button id="button">Click me</button>

Answer 1

You don't have a listener for the end of the animation