CSS loading screen opacity issue

Question

Hi how do i make a keyframe animation disable after it becomes opacity 0. Since the problem I'm having at the moment is with it be at 0 opacity and therefore you cant press anything on the web page. I want this to be a loading screen for the website and for it to fade away gradually.

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="300" height="auto"/>
    
</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: 2s;

}
.scale-out-center {
    animation: scale-out-center 1s ease-in both;
}

@keyframes slideOut{
    from {opacity: 1;}
    to{opacity: 0;)



</style>

Answer 1

You can try this out, As of now, it's working. I have added visibility and z-index into keyframes.

The display doesn't work with CSS transition or animation.

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="300" height="auto"/>

    
</div>

<button>click me</button>

<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: 2s;

}
.scale-out-center {
    animation: scale-out-center 1s ease-in both;
}

@keyframes slideOut{
    from {opacity: 1;}
    to{opacity: 0; visibility: hidden; z-index: -1}}



</style>