JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="bat"></div>

CSS

.bat {
  width: 240px;
  height: 240px;
  background: url('http://aninoob.com/assets/library-assets/sprites/bat.flying.1.png');
  background-position: 0px 0px; 
  background-repeat:repeat-x;
  position:absolute;
}
body{
    background-color:#000000;
}

JavaScript

function sprite_animation(selector,direction,step,totalframes,timeframe,intermission,infinite){
    
    //alert(timeframe);
    
    var time = 0;
    
    for(i=0;i<totalframes;i++){
       
        if(direction == 'horizontal'){
            
           move_sprite_horizontal(selector,parseInt(step*i),time);
        
        } else {
            
           move_sprite_vertical(selector,parseInt(step*i),time);
            
        }
       
       time += timeframe;
        
    }
    
    function move_sprite_horizontal(selector,x,delay){
        
        setTimeout(function(){
            
           $(selector).css('background-position',x + 'px 0px');
            
        }, delay);
        
    }
    
    function move_sprite_vertical(selector,y,delay){
        
        setTimeout(function(){
            
           $(selector).css('background-position','0px ' + y + 'px');
            
        }, delay);
        
    }
    
    if(infinite){
       
        setTimeout(function(){
            
            sprite_animation(selector,direction,step,totalframes,timeframe,intermission,infinite);
            
            
        }, (totalframes*timeframe)+parseInt(intermission));
        
    }
    
}

$(document).ready(function(){
    
    sprite_animation('.bat','horizontal',240,10,60,200,true);
    
});