Change slideOut to a fading animation

Site URL: https://www.nickwatkinsdesign.com/

Hi!

I'm trying to change my loading screen animation from the sliding out to the left to a fading animation. I have changed the "animation-name" to fadeout but it stills slides to the left. Can someone help me? 

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="splash-wrapper">
  <lottie-player src="https://assets10.lottiefiles.com/packages/lf20_obzpck27.json" background="transparent" speed="1" style="width: 400px; height: 400;" loop autoplay>
 </lottie-player>
</div>

<style>
.splash-wrapper{
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  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: 3s;
  animation-delay: 1s;
}
  @keyframes slideOut{
  from{margin-left: 0vw;}
  to{margin-left: -100vw;}
}
</style>

Thanks!

@tuanphan Can you help with this at all? Would really appreciate it!

Hi,

have you found the solution yet?

On 10/10/2021 at 3:34 AM, tuanphan said:

Hi,

have you found the solution yet?

@tuanphan 

Hi!

Nope, would love some help.