title: CSS - Text to move up on load
body: <p>On my page load I'm trying to get text to move up and fade in on page load. </p>
  
  <p>(Example here: <a href="https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/" rel="nofollow">https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/</a>)</p>
  
  <p>I've got the fade in working fine, however when I try the code below for the moveUp animation, the text doesn't appear at all. Where am i going wrong?</p>
  
  <pre><code>@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  
  .fade-in {
    opacity:0;  
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
  
    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
  
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
  }
  
  @keyframes moveUp {
    0% {
        transform: translate(0px,20px);
    }
    100% {
        transform: translate(0px,0px);
    }
  }
  
  .move-up {
    animation:moveUp ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:1s;
  }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;h1 class="paddingTop20 fade-in move-up"&gt;Leading Topic&lt;/h1&gt;
  </code></pre>