Q:

Looping an animation in javascript continuously

My question is how to loop an animation continuously. For example please follow the link below of W3School where a simple box moves from top to bottom and then stops.
http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3
But what I can't figure out is how to make this box animation non stop i.e. after it goes to the bottom it again moves up to its starting place and the animation continues forever.

A:

You can make these adjustments to the JS:

var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 10);

function frame() {
  if (pos == 150) { pos = 0; }
  pos++;
  elem.style.top = pos + 'px';
  elem.style.left = pos + 'px';
}
#container { width: 200px; height: 200px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }
<div id ="container">
  <div id ="animate"></div>
</div>

