CSS loading screen opacity issue-CodePudding

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 >
  <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>

CodePudding user response：

You can use css pointer-events property:

.splash-wrapper {
    pointer-events: none;
}

When set to none than:

The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

It is supported by all modern browsers - check on caniuse

CodePudding user response：

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 >
  <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>

CodePudding user response：

I believe you need to set display: none after it will reach 0 opacity.