title: Using CSS for a fade-in effect on page load
body: <p>Can CSS transitions be used to allow a text paragraph to fade-in on page load?</p>
  
  <p>I really like how it looked on <a href="http://web.archive.org/web/20120728071954/http://www.dotmailapp.com/" rel="noreferrer">http://dotmailapp.com/</a> and would love to use a similar effect using CSS. The domain has since been purchased and no longer has the effect mentioned. An archived copy can be viewed <a href="http://web.archive.org/web/20120728071954/http://www.dotmailapp.com/" rel="noreferrer">on the Wayback Machine</a>.</p>
  
  <h3>Illustration</h3>
  
  <p>Having this markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="test"&gt;
      &lt;p&gt;​This is a test&lt;/p&gt;
  &lt;/div&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
  </code></pre>
  
  <p>With the following CSS rule:</p>
  
  <pre class="lang-css prettyprint-override"><code>#test p {
      opacity: 0;
      margin-top: 25px;
      font-size: 21px;
      text-align: center;
      -webkit-transition: opacity 2s ease-in;
      -moz-transition: opacity 2s ease-in;
      -o-transition: opacity 2s ease-in;
      -ms-transition: opacity 2s ease-in;
      transition: opacity 2s ease-in;
  }​
  </code></pre>
  
  <p>How can the transition be triggered on load?</p>