title: Fade-in effect on page load
body: <p>As already mentioned in the previous question (<a href="https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load">Using CSS for fade-in effect on page load</a>)
  the user asked how to do the fade in effect of <a href="http://dotmailapp.com/" rel="nofollow noreferrer">http://dotmailapp.com/</a>.</p>
  
  <p>I found the question really useful but I have something to add. If you visit the site now you will see a fade-in but at the same time the objects to something like a drop, I checked their CSS and what I found is written below in the code box but I dont know how to apply this on my site.</p>
  
  <p>So do I need their specific JS file? (I don't understand what the <code>/* **** no-js **** */ ...</code> is doing.)</p>
  
  <pre><code>/* **** for startanimation awesomeness **** */
  .logo {
     position: relative;
     top: -50px;
     opacity: 0;
  }
  h1 {
     opacity: 0;
     position: relative;
     top: -30px;
  }
  header .subline {
     opacity: 0;
     position: relative;
     top: -30px;
  }
  .mailchimp {
     opacity: 0;
     position: relative;
     top: -30px;
  }
  .abovethefold .col {
     opacity: 0;
  }
  .browser {
     opacity: 0;
     position: relative;
     top: -50px;
  }
  .belowthefold {
     opacity: 0;
  }
  
  /* **** no-js **** */
  .no-js .logo {
     position: relative;
     top: 0px;
     opacity: 1;
  }
  .no-js h1 {
     opacity: 1;
     position: relative;
     top: 0px;
  }
  .no-js  header .subline {
     opacity: 1;
     position: relative;
     top: 0px;
  }
  .no-js .mailchimp {
     opacity: 1;
     position: relative;
     top: -30px;
  }
  .no-js .abovethefold .col {
     opacity: 0;
  }
  .no-js .browser {
     opacity: 1;
     position: relative;
     top: 0px;
  }
  .no-js .belowthefold {
     opacity: 1;
  }
  </code></pre>