CodePen

HTML

            
              <div class="container">
  <div class="box"></div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @-webkit-keyframes square {
		
		25% {
			top:200px;
			left:0;
		}
		
		50% {
			top:200px;
			left:400px;
		}
		
		75% {
			top:0;
			left:400px;
		}
		
	}

	@keyframes square {
		
		25% {
			top:200px;
			left:0;
		}
		
		50% {
			top:200px;
			left:400px;
		}
		
		75% {
			top:0;
			left:400px;
		}
		
	}

	.container {
		margin:30px auto 0;
		width:500px;
		height:300px;
		border:2px dashed #ccc;
		position:relative;
	}

		.box {
			-webkit-animation: square 8s infinite cubic-bezier(.65,1.95,.03,.32);
			animation: square 8s infinite cubic-bezier(.65,1.95,.03,.32);
			width:100px;
			height:100px;
			background:blue;
			position:absolute;
			top:0;
			left:0;
		}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................