Effects of image loading based on CSS3

Online Demo

Different images implemented by CSS3 can be used to load animation effects and respond to them. It is very suitable for enhancing the dynamic loading effect of waterfall stream layout images!

HTML

<Ul class = "grid effect-4" id = "grid">
<Li> <a href = "http://drbl.in/fWMM"> </a> </li>
<Li> <a href = "http://drbl.in/fWPV"> </a> </li>
<Li> <a href = "http://drbl.in/fWMT"> </a> </li>
<Li> <a href = "http://drbl.in/fQdt"> </a> </li>
<! --... -->
</Ul>
CSS3
/* Effect 4: fall perspective */
. Grid. effect-4 {
Perspective: 1300px;
}
. Grid. effect-4 li {
Transform-style: preserve-3d;
}
. Grid. effect-4 li. animate {
Transform: translateZ (400px) translateY (300px) rotateX (-90deg );
Animation: fallPerspective. 8 s reward-in-out forwards;
}
@ Keyframes fallPerspective {
100% {transform: translateZ (0px) translateY (0px) rotateX (0deg); opacity: 1 ;}
}