title: Fade in text on load
body: <p>I've seen that there are different ways to fade in an object on load but every time I try to apply it to my own code I must be messing something up. I've been trying css and javascript so I'm good to use whatever I can get working.</p>
  
  <p>I would like Hello to fade up on load but then 5 seconds later Next Page also fade's in. </p>
  
  <p>Here's my code so far.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;link href="sky.css" rel="stylesheet" type="text/css"&gt;
  &lt;script type="text/javascript" src="sky.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
      &lt;div id="Welcome"&gt;
          &lt;h1&gt; Hello &lt;/h1&gt;
          &lt;/div&gt;
  
       &lt;div id="Next"&gt; 
          &lt;a href="next.html"&gt;&lt;h2&gt; Next Page &lt;/h2&gt;&lt;/a&gt;
      &lt;/div&gt; 
  
      &lt;video autoplay muted loop id="VidBackground"&gt;
          &lt;source src="video/home.mp4"&gt;
      &lt;/video&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here's my css</p>
  
  <pre><code>h1, h3, a {
      color: #ffffff;
      line-height: 2;
  }
  
  #welcome {
      position: absolute;
      bottom: 15%;
      right: 20%;
      z-index: 2;
  }
  
  #next {
      position: absolute;
      bottom: 10%;
      right: 20%;
      z-index: 2;
  }
  
  #VidBackground {
      position: fixed;
      right: 0;
      bottom: 0;
      object-fit: cover;
      z-index: -1;
  }
  </code></pre>