CSS Animation timing issue on modal close - css

Question

I am using a w3Schools tutorial for a modal. I would like to run an animation after the user clicks the close button. I am using a blind animation and have it working on open but would like the reverse on close.
Should I be using Javascript to change the classes inline? I've experimented with that but the animation doesn't have time to run because I'm closing the modal with display:hidden right after the animation call, so it's being executed before the animation has time to complete.
Here is my html. I have the animation class inline and the only thing I can think of is to switch the out animation with javascript:
<div id="modal-one" class="modal">
<div class="modal-content modal-parent blind-content in origin-middle">
<div class="modal-header">
<h2>header</h2>
<span class="modal-close"></span>
</div>
content here
</div>
</div>
How can I get the blind effect to run on open and close?

Answer 1

Next time please provide a link to the tutorial (or some such).
You could use javascript.
change your html to...
<div id="modal-one" class="modal">
<div class="modal-content modal-parent blind-content in origin-middle">
<div class="modal-header">
<h2>header</h2>
<span class="modal-close d-none"></span>
<span class="model-close-dummy"></span>
</div>
content here
</div>
</div>
then add javascript
let modal = document.querySelector("#modal-one");
let modal_close_dummy = modal.querySelector(".modal-close-dummy")
let modal_close = modal.querySelector(".modal-close")
modal_close_dummy.addEventListener("click", function () {
runClosingAnimation();//run animation - do what you need to do
setTimeout(function(){
modal_close.click(); //programatically click the actual close button after 500ms
}, 500) //500 time in miliseconds to wait, before the stuff inside setTimeout runs
});
Hope this helps.