keyframe loading animation when loading page - html

Question

I am trying to load an unordered list with animation using CSS3 keyframe.
My problem is the list get loaded before the animation begun.
And I want it to load only after the animation.
here is a result of what I achieved so far http://jsbin.com/agelix/1/edit
HTML
<ul
class="loadingdiv" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
CSS
.loadingdiv li{
-moz-animation: loading 1s alternate;
}
.loadingdiv li:nth-of-type(2) {
-moz-animation-delay: 0.4s;
}
.loadingdiv li:nth-of-type(3) {
-moz-animation-delay: 0.6s;
}
.loadingdiv li:nth-of-type(4) {
-moz-animation-delay: 0.8s;
}
.loadingdiv li:nth-of-type(5) {
-moz-animation-delay: 0.9s;
}
#-moz-keyframes loading {
0% {-moz-transform: translateZ(0); opacity:0}
}

Answer 1

OK, after lot click click click... and some info from css3files.com, It worked.
DEMO: http://jsbin.com/ehujis/1/edit
her is what I did.
HTML:
<ul>
<li class="box fade-in">1</li>
<li class="box fade-in">2</li>
<li class="box fade-in">3</li>
<li class="box fade-in">4</li>
</ul>
CSS:
/* make keyframes that tell the start state and the end state of our object */
#keyframes fadeIn {
from { opacity:0; }
to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
animation:fadeIn ease-out 3s;
animation-fill-mode:forwards;
animation-duration:.8s;
}
li:nth-of-type(1) {
animation-delay: 0.6s;
}
li:nth-of-type(2) {
animation-delay: 1.3s;
}
li:nth-of-type(3) {
animation-delay: 2s;
}
li:nth-of-type(4) {
animation-delay: 2.7s;
}
Note: this code is based from the graphicfusiondesign.com article: Creating fancy CSS3 fade in animations on page load
here is a demo