Custom Splash Page

Site URL: https://www.itchmedia.co.uk/

Hiya There! 

Im hoping someone can help me. I am trying to create the same effect seen on the above websites splash page when you first enter the site. I have managed to create a slideout animation with the GIF logo but I cant figure out how to have the one colour background reveal the second colour background and then reveal the site below. 

Any help would be brill! Thanks. 

I have so far used the following code to get the single colour working... 

<div class="splash-wrapper1">
  
   <img src="https://images.squarespace-cdn.com/content/v1/6277b6f9e21a2113e15ccf75/a62a6523-8209-4444-a2f9-0cbb0b8b0a4d/ezgif.com-gif-maker.gif?format=2500w" width="500" height="auto" loop="false">
    
</div>

<style>
.splash-wrapper1 {
position: fixed;
z-index: 9999;
background-color: #F6F6F6;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 2s;
animation-delay: 3s;
}

@keyframes slideOut {
  from {margin-top: 0vw;}
  to {margin-top: -100vw;}
  }
</style>