<div class="div green" id="div"></div>
body {
padding: 20px;
}
.div {
width: 30px;
height: 20px;
position: relative;
}
.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("div"), 60);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.