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


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

<div class="box">
  <div class="title">10 fps:</div>
  <div class="div blue" id="div3"></div>
</div>
body {
  padding: 20px;
  background: #f2f2f2;
}
.box{
  width: 100%;
  height: 200px;
  position: relative;
}
.div {
    width:100px;
    height:100px;
    line-height: 100px;
    text-align: center;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    position: absolute;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}
View Compiled
function moveDiv(div, fps) {
    var left = 0;
    var param = 1;
    function loop () {
        update();
        draw();
    }
    function update() {
        left += param * 2;
        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);
}

moveDiv(document.getElementById("div1"), 60);
moveDiv(document.getElementById("div2"), 30);
moveDiv(document.getElementById("div3"), 10);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.