<div class="title">60 fps:</div>
<div class="div green" id="div4"></div>

<div class="title">30 fps:</div>
<div class="div red" id="div5"></div>

<div class="title">10 fps:</div>
<div class="div blue" id="div6"></div>
body {
  padding: 20px;
}
.div {
    width: 30px;
    height: 20px;
    position: relative;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}
function moveDivTimeBased(div, fps) {
    var left = 0;
    var current = +new Date;
    var previous = +new Date;
    var param = 1;
    function loop() {
        var current = +new Date;
        var dt = current - previous;
        previous = current;
        update(dt);
        draw()
    }
    function update(dt) {
        left += param * (dt * 0.12);
        if (left > 300) {
            left = 300;
            param = -1;
        } else if (left < 0) {
            left = 0;
            param = 1;
        }
    }
    function draw() {
        div.style.left = left + "px";
    }
    setInterval(loop, 1000 / fps);
}

moveDivTimeBased(document.getElementById("div4"), 60);
moveDivTimeBased(document.getElementById("div5"), 30);
moveDivTimeBased(document.getElementById("div6"), 10);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.