fire-fox

Simple sprite animation using a animation sprite by mozilla.

HTML

<div class="fox"></div>
<p><a href="https://mozorg.cdn.mozilla.net/media/img/firefox/partners/foxtail.png">animation sprite</a> by mozilla.</p>

CSS

.fox {
    background-color:#8899c7;
    border:solid #2493c7 10px;
    width:156px;
    height:156px;
    background-repeat:no-repeat;
    background-position:right top;
    background-image:url(https://mozorg.cdn.mozilla.net/media/img/firefox/partners/foxtail.png);
}

JavaScript

var int_frames=40,
    int_width=7020,
    int_a=int_width/int_frames,
    int_b=int_a,
    int_duration=3000;

setInterval(function(){
    int_b+=int_a;
    if(int_b>int_width){
        int_b=int_a;
    }
    $(".fox").css("background-position", (-int_width+int_b)+"px top");
}, int_duration/int_frames);