Code injection breaking page

Site URL: https://mustard-antelope-r3yf.squarespace.com/

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="100" height="auto"/>
</div>
<style>
  header.Header.Header--top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
  div#jb--job-board {
    margin-top: 133.5px;
}
</style>
<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;

}

@keyframes .splash-wrapper {
    100%   { opacity: 0; }
	50%   { opacity: 0; }
  0% { opacity: 1; }
}

</style>

This is the code that I want to inject into the header so there is the animated gif when loading  pages. However when I run this it does let me edit the page and doesn't allow you you navigate the navigation bar. THE Animation is to long and im not sure how to fix it 

PASSWORD : 123

28 minutes ago, ThomasHanley said:

Site URL: https://mustard-antelope-r3yf.squarespace.com/

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="100" height="auto"/>
</div>
<style>
  header.Header.Header--top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
  div#jb--job-board {
    margin-top: 133.5px;
}
</style>
<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;

}

@keyframes .splash-wrapper {
    100%   { opacity: 0; }
	50%   { opacity: 0; }
  0% { opacity: 1; }
}

</style>

This is the code that I want to inject into the header so there is the animated gif when loading  pages. However when I run this it does let me edit the page and doesn't allow you you navigate the navigation bar. THE Animation is to long and im not sure how to fix it 

PASSWORD : 123

Try changing the z-index in this code

to 

z-index: 0;

Let me know how it works on your site

5 minutes ago, bangank36 said:

Try changing the z-index in this code

to 

z-index: 0;

Let me know how it works on your site

I changed the z-index to 0 and it still doesn't allow for me to interact with the webpage.

5 minutes ago, ThomasHanley said:

I changed the z-index to 0 and it still doesn't allow for me to interact with the webpage.

It 's still 9999

Have you saved your setting yet?

6 minutes ago, bangank36 said:

It 's still 9999

Have you saved your setting yet?

Ive have saved it, try now 

2 hours ago, bangank36 said:

It 's still 9999

Have you saved your setting yet?

this fixed it 
 

<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;
  animation-delay: 1;
}

@keyframes slideOut{
  from{margin-left: 0vw; opacity: 1;}
  to{opacity: 0; margin-left: -150vw;}
}
</style>

if i had to guess the way i had it was setting the opacity to 0 but wasnt disabling it when it hit 0 opacity. So i have to have it going off to the side unless they is a way to disable keyframes animation when it hits 0 opacity?

22 minutes ago, ThomasHanley said:

this fixed it 
 

<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;
  animation-delay: 1;
}

@keyframes slideOut{
  from{margin-left: 0vw; opacity: 1;}
  to{opacity: 0; margin-left: -150vw;}
}
</style>

if i had to guess the way i had it was setting the opacity to 0 but wasnt disabling it when it hit 0 opacity. So i have to have it going off to the side unless they is a way to disable keyframes animation when it hits 0 opacity?

It looks like you figured it out, doesn't it?