title: CSS Animation Fade In Slide Down
body: <p>I'm trying to recreate this flash animation into HTML/CSS but I got stuck.</p>
  
  <p>This is the actual animation, the first image with dark background fades in, then the next image will  slide down </p>
  
  <p><a href="http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/" rel="nofollow noreferrer">http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/</a></p>
  
  <p>Here's what I got so far... how can I add the second image to slide down?</p>
  
  <p><a href="http://jsfiddle.net/tetonline/QZNut/2/" rel="nofollow noreferrer">http://jsfiddle.net/tetonline/QZNut/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;img onload="this.style.opacity='1';" src="https://tchuatocolearner.eppi.com/temp/graphinglab/images/blur.png" /&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>img {
      opacity:0;
      -moz-transition: opacity 3s;
      /* Firefox 4 */
      -webkit-transition: opacity 3s;
      /* Safari and Chrome */
      -o-transition: opacity 3s;
      transition: opacity 3s;
  }
  </code></pre>