.wrap
{
  position: relative;

}
.block_left
{
  width: 80px;
  height: 80px;
  background-color: red;
  position: relative;
  animation-name: block1_ex;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}
@keyframes block1_ex {
      0%   {background-color: red; left: 0px; top: 0px;}
      25%  {background-color: yellow; left: 500px; top: 0px;}
      50%  {background-color: blue; left: 500px; top:300px;}
      100% {background-color: #565656;left: 0px; top: 300px;}
}

.block_right{

  position: absolute;
  top: 200px;
  width: 80px;
  height: 80px;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
  background-color: yellow;
  animation-name: block2_ex;
  animation-duration: 4s;
  animation-delay: 2s;

}
@keyframes block2_ex {
  0%   {background-color: yellow; left: 0px; top: 200px;}
  25%  {background-color: blue; left: 500px; top: 200px;}
  50%  {background-color: teal; left: 500px; top:500px;}
  100% {background-color: red;left: 0px; top: 500px;}

}
.block_left1{

  position: absolute;
  left:600px;
  top: 0px;
  width: 80px;
  height: 80px;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
  background-color: blue;
  animation-name: block3_ex;
  animation-duration: 4s;
  animation-delay: 2s;

}
@keyframes block3_ex {
  0%   {background-color: green; left: 600px; top:0px;}
  25%  {background-color: yellow; left: 900px; top:0px;}
  50%  {background-color: teal; left: 900px; top:300px;}
  100% {background-color: red;left: 600px; top: 300px;}
}
.block_right1{

  position: absolute;
  top: 200px;
  left: 600px;
  width: 80px;
  height: 80px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background-color: green;
  animation-name: block4_ex;
  animation-duration: 4s;
  animation-delay: 2s;

}
@keyframes block4_ex {
  0%   {background-color: yellow; left: 600px; top: 200px;}
  25%  {background-color: blue; left: 900px; top: 200px;}
  50%  {background-color: teal; left: 900px; top:500px;}
  100% {background-color: red;left: 600px; top: 500px;}

}