How can I add this animation class to a modal when a button is clicked?

Question

I want the animation to happen when I click the "x" button on the modal, but what is currently happening is that the modal closes without it, and then when I open the modal again, the animation happens without clicking occurs without any content.

This is my current animation class code:

.scale-out-center {
   -webkit-animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

@-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}

This is my JavaScript code:

<script>
    
    var hideDelay = true;
    document.querySelector('#myModal').addEventListener('hide.bs.modal', function(e) {
        if (hideDelay) {
        document.querySelector('.modal-content').classList.add('scale-out-center');
        hideDelay = false;
        setTimeout(function() {
            document.querySelector('#myModal').modal('hide');
            document.querySelector('.modal-content').classList.remove('scale-out-center');
        }, 5000);
        return false;
        }
        hideDelay = true;
        return true;
    });
        
  
</script>

Answer 1

.cont {
    /* some css here */
}
.cont.scale-out-center {
    animation: myAnimation 1s forwards;
}

In javascript, when the button is clicked to add the element horizontally expanding the center class, the animation will start, as shown in my code, it will run for 1 second. You can set Timeout in js and close the modal in 1 second. This is the simple solution.

let cont = document.querySelector('.cont')
let btn = document.querySelector('.btn')
btn.addEventListener("click", ()=>{
    // when you add this class to any element animation will be start
    cont.classList.add("scale-out-center ")
})