Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>JavaScript</title>
		<style type="text/css">
			#b {
				width: 1410px;
				height: 740px;
				margin: 0;
				position: absolute;
				overflow: hidden;
			}

			#c {
				width: 100px;
				height: 100px;
				background:blue;
				margin: 0;
				position: relative;
				animation-name: example;
    			animation-duration: 10s;
			}

			/* @keyframes example {
			    0%   {background-color:blue; left:0px; top:0px;}
			    5%   {background-color:blue; left:10px; top:0px;}
			    10%  {background-color:blue; left:10px; top:10px;}
			    20%  {background-color:blue; left:20px; top:10px;}
			    25%  {background-color:blue; left:20px; top:20px;}
			    30%  {background-color:blue; left:30px; top:20px;}
			    35%  {background-color:blue; left:30px; top:30px;}
			    40%  {background-color:blue; left:40px; top:30px;}
			    45%  {background-color:blue; left:40px; top:40px;}
			    50%  {background-color:blue; left:50px; top:40px;}
			    55%  {background-color:blue; left:50px; top:50px;}
			    60%  {background-color:blue; left:60px; top:50px;}
			    65%  {background-color:blue; left:60px; top:60px;}
			    70%  {background-color:blue; left:70px; top:60px;}
			    75%  {background-color:blue; left:70px; top:70px;}
			    80%  {background-color:blue; left:80px; top:70px;}
			    85%  {background-color:blue; left:80px; top:80px;}
			    90%  {background-color:blue; left:90px; top:80px;}
			    95%  {background-color:blue; left:90px; top:90px;}
			    100% {background-color:blue; left:100px; top:100px;}
}*/

		</style>
	</head>
	<body>
		<div id = "b">
			<div id = "c"></div>
		</div>

		<script type="text/javascript">

			var z = 0;
			var a = 0;
			var outer = document.getElementById( 'b' );
			var inner = document.getElementById( 'c' );
			var down = true;
			var right = true;
			var height = outer.clientHeight - inner.clientHeight;
			var width = outer.clientWidth - inner.clientWidth;

			setInterval( function() {
				if ( down ) {
				 z++;
				}
				else {
				 z--;
				}

				if ( z == height ) {
					down = false;
				}
				else if ( z == 0 ) {
					down = true;
				}

				if ( right ) {
					a++;
				}
				else {
					a--;
				}

				if ( a == width ) {
					right = false;
				}
				else if ( a == 0 ){
					right = true;
				}
				inner.style.marginLeft = a + 'px';
				inner.style.marginTop = z + 'px';
			}, 1 );

		</script>

	</body>
</html>