Basic JS animation

by Darren Welch

HTML

<div id="container">
<div id="ball"></div>
</div>

CSS

#container{
  width: 200px; 
  height: 200px; 
  background: #000; 
  position: relative;"
}

#ball{
  width: 50px; 
  height: 50px;
  border-radius: 50%;
  background: #F00; 
  position: absolute;
 
}

JavaScript

var pos=0;
var ball = document.getElementById("ball");
var right = true;
var x = setInterval(move,50);


function move(){
if (pos == 150)
{
	right = false;
}
else if (pos == 0)
{
	right = true;
}

if (right)
{
	pos+=1;
	ball.style.left = pos+"px";
}
else
{
	pos-=1;
	ball.style.left = pos+"px";
}
}