html - keyframe loading animation when loading page -

I am trying to load an unordered list with animation using CSS3 keyframe. My problem is that the list loads before the animation starts and I want to load it only after the animation.

Even the result of what I have achieved so far is

HTML

    
 CSS  
  .LoadingDive Li {-MOZ-Animation: Loading 1S optional; }. Loading Li Li: NT-OF-Type (2) {-Moz-Animation-Delay: 0.4S; } .Loading Li Li: NT-OF-Type (3) {-Moz-Animation-Delay: 0.6S; }. Loading Li Li: NT-OF-Type (4) {-Moz-Animation-Delay: 0.8S; }. Loading Li Li: NT-OF-Type (5) {-Moz-Animation-Delay: 0.9S; } @ -Moz-keyframe loading {0% {-moz-transform: translate (0); Opacity: 0}}  
 
 OK, click after a lot of clicks. .. and some information, it worked  
 Demo:  
 That's what I did. HTML:    & lt; Ul & gt; & Lt; Li class = "box feed-in" & gt; 1 & lt; / Li & gt; & Lt; Li class = "box feed-in" & gt; 2 & lt; / Li & gt; & Lt; Li class = "box feed-in" & gt; 3 & lt; / Li & gt; & Lt; Li class = "box feed-in" & gt; 4 & lt; / Li & gt; & Lt; / Ul & gt;   
 CSS:  
  / * Creates keyframes that tell the starting position and the end of our object / / @ keyframe fadein {{from opacity: 0; } {Opacity: 1; }}. Fade-In {Opacity: 0; / * Invisible Things on Start * / Animation: Fadein Less-Out 3s; Animation Fill-Mode: Forward; Animation-duration: .8s; } Li: nth-of-type (1) {animation-delay: 0.6s; } Li: nth-of-type (2) {animation - delay: 1.3s; } Li: NT-OF-Type (3) {Animation-Delay: 2s; } Li: nth-of-type (4) {animation-delay: 2.7 s; }   
 Note: This code is graphic fusiondesigning com. The article is based on:  
 Here is the demo