PNH animé V1 ->rose des vents

by iamvdo

HTML

<div></div>

CSS

div{
width:80px;
height:80px;
background:url('http://dev.iamvdo.me/star-green.png');
-webkit-animation:rockThis 2.91s step-start infinite ;
   -moz-animation:rockThis 2.91s step-start infinite ;
}

@-webkit-keyframes rockThis{
from{background-position:0 0;}
1.42%{ background-position:-80px 0px; }2.85%{ background-position:-160px 0px; }4.28%{ background-position:-240px 0px; }5.71%{ background-position:-320px 0px; }7.14%{ background-position:-400px 0px; }8.57%{ background-position:-480px 0px; }10%{ background-position:-560px 0px; }11.42%{ background-position:-640px 0px; }12.85%{ background-position:-720px 0px; }14.28%{ background-position:-800px 0px; }15.71%{ background-position:-880px 0px; }17.14%{ background-position:-960px 0px; }18.57%{ background-position:-1040px 0px; }20%{ background-position:-1120px 0px; }21.42%{ background-position:-1200px 0px; }22.85%{ background-position:-1280px 0px; }24.28%{ background-position:-1360px 0px; }25.71%{ background-position:-1440px 0px; }27.14%{ background-position:-1520px 0px; }28.57%{ background-position:-1600px 0px; }30%{ background-position:-1680px 0px; }31.42%{ background-position:-1760px 0px; }32.85%{ background-position:-1840px 0px; }34.28%{ background-position:-1920px 0px; }35.71%{ background-position:0px -80px; }37.14%{ background-position:-2080px -80px; }38.57%{ background-position:-2160px -80px; }40%{ background-position:-2240px -80px; }41.42%{ background-position:-2320px -80px; }42.85%{ background-position:-2400px -80px; }44.28%{ background-position:-2480px -80px; }45.71%{ background-position:-2560px -80px; }47.14%{ background-position:-2640px -80px; }48.57%{ background-position:-2720px -80px; }50%{ background-position:-2800px -80px; }51.42%{ background-position:-2880px -80px; }52.85%{ background-position:-2960px -80px; }54.28%{ background-position:-3040px -80px; }55.71%{ background-position:-3120px -80px; }57.14%{ background-position:-3200px -80px; }58.57%{ background-position:-3280px -80px; }60%{...

JavaScript

$(function(){
    
    // creation des keyframes CSS uniquement
    
    var txt = '';
    var dy = 0;
    for(i=1;i<=70;i++){
        var t = i*100/70;
        t = parseInt( t*100 ) /100;
        var dx = -80*i;
        
        if(i%25==0){
            dy-=80;
            dx=0;
        }
        
        
        txt+= t+'%{ background-position:'+dx+'px '+dy+'px; }';
    }
   
    
    
    //$('div').html(txt);
});