Splash Screen blocking website interaction

I have a basic website splash screen. After the splash screen displays, I have some website interactivity on my page, but it is disabled after the splash screen is displayed (I can't choose options from the dropdown anymore). Perhaps the splash screen is still present after it has faded away? Any ideas how I might be able to fix this? Here's my code below:

<html>
 <head>
   <div class="splash">
        <p class ="fade-in">Hi there! This is a splashscreen!<br>
                            It disables everything underneath it<br>
                            I would like to fix this problem<br>
</p>
    </div>

   <form class = 'select-div' title='Choose a field'>
            <select id="numbers">
                <option value="rank"  >Rankings</option>
                <option value="total_cases">Total Cases</option>
                <option value="new_cases">New Cases</option>
                <option value="total_deaths">Total Deaths</option>
                <option value="new_deaths">New Deaths</option>
                <option value="total_recovered">Total Recovered</option>
                <option value="new_recovered">New Recoveries</option>
                <option value="active_cases">Active Cases</option>  
                <option value="critical_cases">Critical Cases</option> 
                <option value="cases_1m">Total Cases/1M people</option>
                <option value="deaths_1m">Deaths/1M people</option>
                <option value="total_tests">Total Tests</option>
                <option value="tests_1m">Tests/1M people</option>
                <option value="population">Country Population</option>
                <option value="cases_x_ppl">1 Case/X People</option>
                <option value="deaths_x_ppl">1 Death/X People</option>
                <option value="tests_x_ppl">1 Test/X People</option>
            </select>
        </form>

.splash{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
}

.splash.display-none{
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
  line-height: 90vh;
  transition: 0.5s;
}

@keyframes fadeIn{
  to{
    opacity: 1;
  }
}

.fade-in{
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded',(e)=>{
    setTimeout(()=>{
        splash.classList.add('display-none');
    },5000);
})

Solution

Your display-none class is just setting the opacity to 0, which means it's still rendered, but it's completely transparent.

I'd probably rename display-none to fading-out, then create a new class of display-none which is just display: none. Then, after the CSS transition is complete (0.5s), add the (new) display-none class.

The problem with adding display:none in to the existing class you have is that you'll lose the fade transition, because it'll immediately go to display: none. opacity can be animated, display cannot.

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded',(e)=>{
	setTimeout(()=>{
		splash.classList.add('fading-out');
    setTimeout(() => {
      splash.classList.add('display-none');
    }, 500); // 500ms = 0.5s = The length of the CSS transition
	},5000);
})

.splash{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
}

.splash.fading-out{
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
  line-height: 90vh;
  transition: 0.5s;
}

.splash.display-none {
  display: none;
}

@keyframes fadeIn{
  to{
    opacity: 1;
  }
}

.fade-in{
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

   <div class="splash">
		<p class ="fade-in">Hi there! This is a splashscreen!<br>
							It disables everything underneath it<br>
							I would like to fix this problem<br>
</p>
	</div>
   
   <form class = 'select-div' title='Choose a field'>
			<select id="numbers">
				<option value="rank"  >Rankings</option>
				<option value="total_cases">Total Cases</option>
				<option value="new_cases">New Cases</option>
				<option value="total_deaths">Total Deaths</option>
				<option value="new_deaths">New Deaths</option>
				<option value="total_recovered">Total Recovered</option>
				<option value="new_recovered">New Recoveries</option>
				<option value="active_cases">Active Cases</option>  
				<option value="critical_cases">Critical Cases</option> 
				<option value="cases_1m">Total Cases/1M people</option>
				<option value="deaths_1m">Deaths/1M people</option>
				<option value="total_tests">Total Tests</option>
				<option value="tests_1m">Tests/1M people</option>
				<option value="population">Country Population</option>
				<option value="cases_x_ppl">1 Case/X People</option>
				<option value="deaths_x_ppl">1 Death/X People</option>
				<option value="tests_x_ppl">1 Test/X People</option>
			</select>
		</form>