Stop infinite CSS loop

Question

I have auto scaleIn animation on modal, and scaleOut after press button. It should be really easy, but I get unexpected behavior - infinite loop (when I close the modal it shows another time). Can you explain me this situation, and give a tip how to fix it?

Regards

https://codepen.io/SeboFE/pen/PVxqxq

const modal = document.getElementsByClassName("modal")[0];
modal.addEventListener("click", closeModal);

function closeModal() {
  modal.classList.remove("scaleIn");
  modal.classList.add("scaleOut");
  setTimeout(() => {
    modal.classList.remove("scaleOut");
  }, 1000);
};

.modal {
  position: relative;
  overflow: hidden;
  width: 250px;
  height: 250px;
  background-color: #e58e26;
  border-radius: 20px;
  border: solid 10px gray;
}

.scaleIn {
  animation-name: scaleIn;
  animation-duration: 0.5s;
}

.scaleOut {
  animation-name: scaleOut;
  animation-duration: 1s;
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(1.0);
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(1.0)
  }
  30% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(0);
    display: none;
  }
}

<div class="frame">
  <div class="center">
    <div class="modal scaleIn">
      <div class="content">
        <i class="fas fa-exclamation-triangle"></i>
        <h2>Error!</h2>
        <span>An error has occured while creating an error report</span>
      </div>
      <button>Dismiss</button>
    </div>
  </div>
</div>