NPPLimted

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>