Javascript Animations

<html>
	<head>
    	<title>Javascript Animations</title>
    </head>
    <body>
	
		<style type="text/css">
			.main_circle {  
				width: 300px; 
				height: 300px; 
				border:2px solid #000;  
				border-radius:150px;  
				position: relative; 
				background:#F2F2F2;
			}
			#animate {
				width: 50px;
				height: 50px;  
				border-radius:150px; 
				position: absolute; 
				background-color: #0099da;
			}
			.my_btn{ 
				background:#0099da; 
				border-radius:2px; 
				padding:6px 20px;
				margin:15px 70px; 
				color:#FFF;
			}
			.my_btn:hover{ background:#069;}
		</style>

<div class="main_circle">
			<div id ="animate"></div>
		</div>
		 
		<script type="text/javascript">
			function myMove() {
			  var elem = document.getElementById("animate");   
			  var pos = 0;
			  var id = setInterval(frame, 5);
			  function frame() {
				if (pos == 250) {
				  clearInterval(id);
				} else {
				  pos++; 
				  elem.style.top = pos + 'px'; 
				  elem.style.left = pos + 'px'; 
				}
			  }
			}
		</script>
		 
		<button onclick="myMove()" class="my_btn">Start Animation</button>
        
    </body>
</html>

Output :

Topic : Animations