css3 - CSS Animation Delay Not Working -

trying fade in 1 div....and 7 seconds later, fade div in. cannot, life of me, figure out why it's not working. animations work (the fadein/fadeout animations) need "going" div fade in after set amount of seconds. know how correctly?

.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 , 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 , chrome */     -o-animation: fadein 3s ease-in; /* opera */     animation: fadein 3s ease-in;  } 

thank you. fiddle here:

http://jsfiddle.net/yz4va/1/

use below .going class. forwards in animation property make sure block doesn't go opacity:0 (invisible) after last key-frame executed.

#people .going{     opacity: 0;     -moz-animation: fadein 3s ease-in 7s forwards; /* firefox */     -webkit-animation: fadein 3s ease-in 7s forwards; /* safari , chrome */     -o-animation: fadein 3s ease-in 7s forwards; /* opera */     animation: fadein 3s ease-in 7s forwards; } 

the above short-hand doing animation delay.

fiddle demo