Untitled

<html>
<head>
<style>
.a {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;

}
.b{
	width:400px;
	height:400px;
	background-color:yellow;
	position:fixed;
	top:0;
	bottom:0;
}

@keyframes example {
  0%   { left:0px; top:0px;}
  16.6%  { left:300px; top:300px;}
  33.2%  { left:0px; top:0px;}
  49.4%  { left:300px; top:0px;}
  65.6%{ left:300px; top:300px;}
  82.2%{ left:0px; top:300px;}
  100%{ left:0px; top:0px;}
}
</style>
</head>
<body>
<div class="b">
<div class="a"></div></div>

</body>
</html>