Как сделать анимацию при сворачивании модального окна на CSS?

Question

[tj57]

Есть пример, как создавать модальное окно с анимацией:
https://www.w3schools.com/howto/howto_css_modal_im...

Здесь анимация работает только при открытии окна. Как сделать, чтобы она работала при закрытии ? Я попробовал сделать так :

.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";
}

При клике на кнопку закрытия модальное окно исчезает сразу, без анимации. Если убрать display:none, то будет происходить анимация закрытия, но оно появится вновь. Как сделать, чтобы свойство display:none срабатывало спустя некоторое время ?

Answer 1

[MeylisDay]

https://codepen.io/meylisday/pen/ZrKeRO глянь тут пример, сделано с помощью библиотеки animate.css

Comments

[tj57]

оно не так анимируется