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

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

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

.green {
    background-color: green;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}
function moveDivTimeBasedImprove(div, fps) {
        var left = 0;
        var current = +new Date;
        var previous = +new Date;
        var dt = 1000 / 60;
        var acc = 0;
        var param = 1;

        function loop() {
            var current = +new Date;
            var passed = current - previous;
            previous = current;
            acc += passed;
            while(acc >= dt) {
                update(dt);
                acc -= 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);
    }

moveDivTimeBasedImprove(document.getElementById("div7"), 60);
moveDivTimeBasedImprove(document.getElementById("div8"), 30);
moveDivTimeBasedImprove(document.getElementById("div9"), 10);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.