CSS Animation (blinds rotation)

HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Animations</title> <style> body{ font-size:16px; margin:0; padding:0; overflow-x: hidden; background:#eee; } .uzu{ height: 240px; width: 240px; margin: 0 auto; display: block; cursor: pointer; border: 1px solid #555; overflow: hidden; background:repeating-linear-gradient(0deg, #eee 0, #fff 11px, #333 12px, #333 12px ); animation: bg 2.45s linear infinite; } ul{ list-style: none; margin: 0; padding: 0; perspective: 500px; } .uzu a{ text-align: center; text-decoration: none; display: block; } .uzu li{ perspective: 1000px; background-image: url('data:image/jpeg;base64,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'); background-repeat: no-repeat; display: block; line-height: 12px; height: 12px; width: 100%; box-shadow: 0 0 0 1px #333; font-size: 10px; transform: rotateX(180deg); font-size: 0; position: relative; backface-visibility: hidden; } .uzu li{ animation:lid 3s ease forwards alternate infinite; } @keyframes bg { 0%{background-position:0 0;} 100%{background-position:0 12px;} } @keyframes lid { 0%{transform: rotateX(180deg);} 100%{transform: rotateX(0deg);} } .uzu li:nth-child(1){ background-position: 0 0; animation-delay: 0s; } .uzu li:nth-child(2){ background-position: 0 -12px; animation-delay: .1s; } .uzu li:nth-child(3){ background-position: 0 -24px; animation-delay: .2s; } .uzu li:nth-child(4){ background-position: 0 -36px; animation-delay: .3s; } .uzu li:nth-child(5){ background-position: 0 -48px; animation-delay: .4s; } .uzu li:nth-child(6){ background-position: 0 -60px; animation-delay: .5s; } .uzu li:nth-child(7){ background-position: 0 -72px; animation-delay: .6s; } .uzu li:nth-child(8){ background-position: 0 -84px; animation-delay: .7s; } .uzu li:nth-child(9){ background-position: 0 -96px; animation-delay: .8s; } .uzu li:nth-child(10){ background-position: 0 -108px; animation-delay: .9s; } .uzu li:nth-child(11){ background-position: 0 -120px; animation-delay: 1s; } .uzu li:nth-child(12){ background-position: 0 -132px; animation-delay: 1.1s; } .uzu li:nth-child(13){ background-position: 0 -144px; animation-delay: 1.2s; } .uzu li:nth-child(14){ background-position: 0 -156px; animation-delay: 1.3s; } .uzu li:nth-child(15){ background-position: 0 -168px; animation-delay: 1.4s; } .uzu li:nth-child(16){ background-position: 0 -180px; animation-delay: 1.5s; } .uzu li:nth-child(17){ background-position: 0 -192px; animation-delay: 1.6s; } .uzu li:nth-child(18){ background-position: 0 -204px; animation-delay: 1.7s; } .uzu li:nth-child(19){ background-position: 0 -216px; animation-delay: 1.8s; } .uzu li:nth-child(20){ background-position: 0 -228px; animation-delay: 1.9s; } </style> </head> <body> <div class="uzu"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </body> </html>
CSS
JAVASCRIPT
Expand for more options Login