[Bootstrap] Chiudere modal con animazione

[fermat]

ciao!

mi hanno chiesto di creare un loading page che poi dopo un tot di secondi si chiude con questo effetto: https://www.mattepuffo.com/DOWNLOAD/test.mp4

per creare il loading ho usato il modal di bootstrap, cambiando lo sfondo.
il sole che gira ok, ed ho fatto questo:

  <script>
    onload = (event) => {
      const lm = document.getElementById('loading_modal');
      const loadingModal = new bootstrap.Modal(lm, {
        keyboard: false
      });
      loadingModal.show();
      lm.classList.add("fade");


      setTimeout(function () {
        loadingModal.hide();
      }, 3000);
    };
  </script>


  <div id="loading_modal" class="modal" tabindex="-1">
    <div id="loading_modal_dialog" class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-body text-center">
          <img id="sole_modal" src="sole.svg" alt="">
        </div>
      </div>
    </div>
  </div>

funziona tutto, tranne che sinceramente non so come ottenere quell'effetto di chiusura del modal.
non sono costretto ad usare il modal di bootstrap ovviamente, ma prescindere non ho idea da iniziare!
qualche aiuto?

[fermat]

ok ho più o meno risolto:

  <script>
    onload = (event) => {
      setTimeout(function () {
        document.getElementById('loading_modal').classList.add('modal_exit');
      }, 3000);
    };
  </script>


  <div id="loading_modal" class="my_modal" tabindex="-1">
    <div class="modal_body">
      <img id="sole_modal" src="<?php echo IMAGE; ?>sole.svg" alt="">
    </div>
  </div>

css:

.modal_exit {
  -webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
  animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}


@-webkit-keyframes puff-out-center {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }


  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
}


@keyframes puff-out-center {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }


  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
}

ora ho un altro problema, ma magari ne parlo su un altro thread!