title: fade in and move down
body: <p>I have an animation set on my homepage headline using CSS to make it fade in when the page loads.</p>
  
  <p>I have seen on other sites a really impressive animation that will fade in the title and move it down slightly.</p>
  
  <p>How would I have to alter my code to be able to achieve this?</p>
  
  <pre><code>&lt;div class="homepage"&gt;
      &lt;div class="headline"&gt;
          &lt;h1&gt;&lt;span&gt;WELCOME&lt;/span&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="subheadline"&gt;
          &lt;h1&gt;
              &lt;span&gt;To the home of&lt;/span&gt;
          &lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="subheadline"&gt;
          &lt;h1&gt;
              &lt;span&gt;Multimedia Journalist&lt;/span&gt;
          &lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="subheadline"&gt;
          &lt;h1&gt;
              &lt;span&gt;Dan Morris&lt;/span&gt;
          &lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;a href="#contact" class="smoothScroll" id="contactlink"&gt;Let's talk&lt;/a&gt;
      &lt;div class="down-link"&gt;
          &lt;a class="w-downlink" href="#about"&gt;
              &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.headline {
      height: auto;
      width: 75%;
      margin-left: 78px;
      margin-top: 120px;
      margin-right: auto;
      font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
      font-size: 12px;
      font-weight: 200;
      color: #676767;
      text-align: left;
      opacity: 0;
  }
  
  @-webkit-keyframes fadeIn {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  
  @keyframes fadeIn {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  
  .fadeIn {
      -webkit-animation: fadeIn 1s ease-in .5s both;
      animation: fadeIn .1s ease-in .5s both;
  }
  </code></pre>