title: CSS Animation Delay Not Working
body: <p>Trying to fade in one div....and 7 seconds later, fade another div in. I cannot, for the life of me, figure out why it's not working. The animations themselves work (the fadein/fadeout animations) but I need the "going" div to fade in after a set amount of seconds. Anyone know how to do this correctly?</p>
  
  <pre><code>.coming{
      width:320px;
      height:auto;
      position:absolute;
      top:0px;
      left:0px;
      margin-left:10px;
      background:#FFF;
      color:#000;
      font-family: Sans-Serif;
      font-size:24px;
      border-radius: 10px 10px 10px 10px;
      -moz-box-shadow: 0px 0px 0px #000;
      -webkit-box-shadow: 0px 0px 0px #000;
      box-shadow: 1px 1px 5px #222;
      padding:2px 20px;
  
      }
  
  #people .coming{
      -moz-animation: fadein 3s ease-in; /* Firefox */
      -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
      -o-animation: fadein 3s ease-in; /* Opera */
      animation: fadein 3s ease-in;
  }
  
  
  .going{
      width:320px;
      height:auto;
      position:absolute;
      top:120px;
      left:0px;
      margin-left:10px;
      background:#FFF;
      color:#000;
      font-family: Sans-Serif;
      font-size:24px;
      border-radius: 10px 10px 10px 10px;
      -moz-box-shadow: 0px 0px 0px #000;
      -webkit-box-shadow: 0px 0px 0px #000;
      box-shadow: 1px 1px 5px #222;
      padding:2px 20px;
  }
  
  
  #people .going{
      animation-delay: 7s;
      -moz-animation: fadein 3s ease-in; /* Firefox */
      -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
      -o-animation: fadein 3s ease-in; /* Opera */
      animation: fadein 3s ease-in;
  
  }
  </code></pre>
  
  <p>Thank you. The fiddle is here:</p>
  
  <p><a href="http://jsfiddle.net/yZ4va/1/">http://jsfiddle.net/yZ4va/1/</a></p>