JSFiddle - React, Tailwind, and code Playground

by hjlammers

HTML

<div id="bus"></div>

CSS

#bus {
    position: absolute;
    left: 0;
    top: 0;
    width: 101px;
    height: 76px;
    background: url('http://www.maxsebes.nl/bus.png') no-repeat -144px -12px;
}

JavaScript

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
    };
}());

var bus = $('#bus');

requestAnimationFrame(animationLoop);

function animationLoop() {
    if (parseInt(bus.css('left'), 10) + parseInt(bus.css('width'), 10) < $(window).width())
    {
        requestAnimationFrame(animationLoop);
    }
    
    bus.css({'top': '+=1px', 'left': '+=2px'});
}