How to make an animation when minimizing a modal with CSS?

Question

css

There is an example of how to create a modal window with animation:
https://www.w3schools.com/howto/howto_css_modal_im...
Here the animation works only when the window is opened. How can I make it work when closed? I tried to do like this:

.animation-open {
 -webkit-animation-name: zoom-in;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom-in;
    animation-duration: 0.6s;
}

.animation-close{
 -webkit-animation-name: zoom-out;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom-out;
    animation-duration: 0.6s;}

@-webkit-keyframes zoom-in {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom-in {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

@-webkit-keyframes zoom-out {
    from {-webkit-transform:scale(1)} 
    to {-webkit-transform:scale(0)}
}

@keyframes zoom-out {
    from {transform:scale(1)} 
    to {transform:scale(0)}
}

img.onclick = function(){

  modal.classList.remove("animation-close");
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
    modalImg.classList.toggle("animation-open");
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
   		modal.classList.toggle("animation-close");
        	//здесь должна быть задержка
                modal.style.display = "none";
}

When you click on the close button, the modal window disappears immediately, without animation. If you remove display:none, then the closing animation will occur, but it will reappear. How can I make the display:none property fire after a while?

Answer 1

https://codepen.io/meylisday/pen/ZrKeRO look here for an example, made using the animate.css library