I'm using animation property CSS to animate the window when the user clicks maximize button. The window is created ONLY when the maximize button was clicked and the animation is working, but the problem is when I click the close button the window is doesn't animate. How can I animate when the close button is click?

JavaScript:

Show project image.

_showProjectImage(e) {
  const btn = e.target.closest('.projects__maximize-btn');
  if (!btn) return;
  const { id } = btn.dataset;
  const { image } = this._data.find(image => image.id === +id);

  this._projectBox = e.target.closest('.projects__box');
  const markup = this._generateProjectImage(image);
  this._projectBox.insertAdjacentHTML('afterbegin', markup);
}

Hide project image.

_hideProjectImage(e) {
  const btnClose = e.target.closest('.btn__close-window');
  if (!btnClose) return;
  this._projectBox.removeChild(this._projectBox.firstElementChild);
}

HTML Element:

_generateProjectImage(image) {
  return `
    <div class="projects__window">
      <div class="projects__window-content">
        <button class="projects__window-close btn__close-window">
          <svg class="projects__window-icon">
            <use
              xlink:href="${icon}#icon-close"
            ></use>
          </svg>
        </button>
        <div class="projects__window-box">
          <img src="${image}" alt="" class="projects__window-image">
        </div>
      </div>
    </div>
  `;
}

CSS:

.projects {
  &__window {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    animation: window-animate 300ms linear;
  }
}


@keyframes window-animate {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}