Как вывести HTML текст перед CSS анимацией

Question

Я пытаюсь переместить текст «Добро пожаловать на мой сайт» перед анимацией луны, но даже при корректировке z-index и позиции текст заголовка остается скрытым за анимацией. Я относительно новичок, поэтому я не уверен, что делать. ТИА. Вот код HTML и CSS, над которым я работал:

setTimeout(function() {
  $('.moon').css("animation-play-state", "paused");
}, 20000)

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position:relative;
}

html {
  z-index: -1;
  position: relative;
  background-image: linear-gradient(black 60%, #041931);
  height: 100%;
}

body {
  font-family: 'Manrope', sans-serif;
}

title {
  font-color: white;
  z-index: -1;
  position: relative;
}

#text {
  z-index: 1;
  position: relative;
}

.moon {
  z-index: -1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #0a0a0a;
  margin: 1rem auto;
  animation: moon 20s linear infinite;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="text">
  <center> Welcome to my Site! </center>
</h1>
<div class="moon"></div>

Answer 1

Попробуйте это css:

    @keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position: relative;
}

html {
  z-index: -1;
  position: relative;
  background-image: linear-gradient(black 60%, #041931);
  height: 100%;
}

body {
  font-family: 'Manrope', sans-serif;
  background: none;


}

center{
  margin-bottom:-80px;
  margin-top:80px;


}

title {
  color: white;
  z-index: -1;
  position: relative;
}

#text {
  z-index: 1;
  position: relative;
}

.moon {
  z-index: -1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #0a0a0a;
  margin: 1rem auto;
  animation: moon 20s linear infinite;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}

Jsfiddle: https://jsfiddle.net/ozncak6g/

Answer 2

Я переместил ваш текст на 100 пикселей сверху и дал ему красный цвет. Кажется, работает нормально.

setTimeout(function() {
  $('.moon').css("animation-play-state", "paused");
}, 20000)

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position:relative;
}

html {
  background-image: linear-gradient(black 60%, #041931);
  height: 100%;
}

body {
  font-family: 'Manrope', sans-serif;
}

title {
  font-color: white;
  z-index: -1;
  position: relative;
}

#text {
  z-index: 1;
  position: relative;
  color: red; /* For visibility */
  top: 100px;
}

.moon {
  width: 10rem;
  height: 10rem;
  background: #0a0a0a;
  margin: 1rem auto;
  animation: moon 20s linear infinite;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="text">
  <center> Welcome to my Site! </center>
</h1>
<div class="moon"></div>