How to repeat SVG animation after reload using Javascript

[Sora]

Hello all, I need your help

i created a pre-loading screen for a website, and the logo SVG animation is going well, but the only part I m confused with is that:
Every time I reload, the animation doesn’t happen, yet the the 3 seconds of the loader is functional.

Here is the website: http://itsrev.io

here is the code:

JS:

  var loaderScreen;

      function showPage() {
        document.getElementById("loader").style.display = "none";
        document.getElementById("banner").style.display = "block";
      }

      function loadingFunction() {
        loaderScreen = setTimeout(showPage, 4000);
      }

CSS:

/**************************************
Preloader
***************************************/
#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#banner {
  display: none;
}

/* Add animation to "page content" */
#banner {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}