title: How to layer animation behind another animation in CSS and HTML?
body: <p>I am struggling with figuring out how to layer 2 different animations. I would like to make the twinkling stars animation behind the moving moon animation and website tile (so that the background is essentially twinkling stars with a moving moon). Right now, it just layers on top of the moon animation and title, completely covering them, and the position is off. I am relatively new to HTML so please excuse me if my question is obvious. TIA</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }
  
  @keyframes move-twink-back {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  
  @-webkit-keyframes move-twink-back {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  
  @-moz-keyframes move-twink-back {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  
  @-ms-keyframes move-twink-back {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  
  .stars,
  .twinkling {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .stars {
    background: #000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
    z-index: -1;
  }
  
  .twinkling {
    background: transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
    z-index: 0;
    -moz-animation: move-twink-back 200s linear infinite;
    -ms-animation: move-twink-back 200s linear infinite;
    -o-animation: move-twink-back 200s linear infinite;
    -webkit-animation: move-twink-back 200s linear infinite;
    animation: move-twink-back 200s linear infinite;
  }
  
  html {
    z-index: -1;
    position: relative;
    background-image: linear-gradient(black 80%, #041931, #fff);
    background-repeat: no-repeat;
    height: 45%;
  }
  
  body {
    font-family: 'Manrope', sans-serif;
    background: none;
  }
  
  div {
    background: none;
    z-index: 1;
  }
  
  .moon {
    z-index: -1;
    position: relative;
    width: 10rem;
    height: 10rem;
    background: #0a0a0a;
    margin: 1rem auto;
    animation: moon 20s linear infinite alternate;
    border-radius: 50%;
    box-shadow: inset -10rem 0 whitesmoke;
    transform: rotate(-10deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;style&gt;
    div {
      margin: 10%;
    }
  &lt;/style&gt;
  
  &lt;body&gt;
    &lt;h1 id="text"&gt;
      &lt;center&gt; Welcome to my Site! &lt;/center&gt;
    &lt;/h1&gt;
    &lt;div class="moon"&gt;&lt;/div&gt;
    &lt;div class="stars"&gt;&lt;/div&gt;
    &lt;div class="twinkling"&gt;&lt;/div&gt;
    &lt;div class="maintext"&gt;
      &lt;h2&gt;This is text below the animations&lt;/h2&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
      setTimeout(function() {
        $('.moon').css("animation-play-state", "paused");
      }, 20000)
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>