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>

Why use an entire `animation`? All you need is `transition`. — Dai, Jan 19 '22 at 12:04

score 0 · Answer 1 · answered Jan 19 '22 at 12:06

0

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

answered Jan 19 '22 at 12:06

skobaljic

9,379
1
25
51

Using `pointer-events` doesn't stop keyboard navigation and other input devices. – Dai Jan 19 '22 at 13:26
What is the point of this comment? – skobaljic Jan 20 '22 at 12:43

score 0 · Accepted Answer · answered Jan 19 '22 at 12:17

0

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>

answered Jan 19 '22 at 12:17

MOHD SHAHZAIB

500
2
10

@ThomasHanley See this answer for an explanation: https://stackoverflow.com/a/34529598/159145 - I note that `visibility: hidden;` is **much better** than using `pointer-events: none;`. – Dai Jan 19 '22 at 13:30
@ThomasHanley, Please accept this answer if it works for you. Thank you. – MOHD SHAHZAIB Jan 19 '22 at 16:41
The only difference between `opacity: 0;` and `visibility: hidden'` is that last one removes pointer events, as you can see in that answer table. So, the only difference you made is setting the z-index, which is quite ok, but your `much better` has no sense indeed. – skobaljic Jan 20 '22 at 13:03

CSS loading screen opacity issue

2 Answers2