SOURCE

var box = document.getElementById('box'), // the box
    boxPos = 10, // the box's position
    boxVelocity = 2, // the box's velocity
    limit = 300; // how far the box can go before it switches direction
 
function draw() {
    box.style.left = boxPos + 'px';
}

function update() {
    boxPos += boxVelocity;
    // Switch directions if we go too far
    if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity;
}

var lastFrameTimeMs = 0, // The last time the loop was run
    maxFPS = 10; // The maximum FPS we want to allow
 
function mainLoop(timestamp) {
    // Throttle the frame rate.    
    if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
        requestAnimationFrame(mainLoop);
        return;
    }
    lastFrameTimeMs = timestamp;
 
    update();
    draw();
    requestAnimationFrame(mainLoop);
}

// Start things off
requestAnimationFrame(mainLoop);

<div id="box"></div>

#box {
    background-color: red;
    height: 50px;
    left: 150px;
    position: absolute;
    top: 10px;
    width: 50px;
}