body {
  background-color: white;
}
.left { 
  position: absolute;
  width: 100px; 
  height: 200px;
  margin: 0;
  padding: 0;
  animation-name: moveone;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.right { 
  position: absolute;
  right: 0;
  width: 100px;
  height: 200px;
  margin: 0;
  padding: 0;
  animation-name: movetwo;
  animation-duration: 5.2s;
  animation-iteration-count: infinite; 
}


@keyframes moveone {
  0% {left: 0; top: 0;}
  25% {left: calc(50% - 100px); top: 50vh;}
  50% {left: 0; top: calc(100vh - 200px);}
  75% {left: calc(50% - 100px); top: 50vh;}
  100% {left: 0; top: 0;}
}
@keyframes movetwo {
  0% {right: 0; top: 0;}
  25% {right: calc(50% - 100px); top: 50%;}
  50% {right: 0; top: calc(100vh - 200px);}
  75% {right: calc(50% - 100px); top: 50%;}
  100% {right: 0; top: 0;}
}