#rectangle {
  height: 100px;
  width: 100px;
  background-color:black;
  transform: scale(3,2);
  position: relative;
  animation-name:movement;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
#square {
  width:50px;
  height:50px;
  background-color:limegreen;
  transform: translate(0px, 300px);
  position: relative;
  animation-name:movement2;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
@keyframes movement {
  0% {left: 0; top: 0; color:black;}
  25% {left: 500px; top: 0; color:black;}
  50% {left: 500px; top: 500px; color:plum;}
  75% {left: 0; top: 500px; background-color: sandybrown;}
  100% {left: 0; top: 500px; background-color: limegreen;}
}
@keyframes movement2 {
  0% {
    left:0;
    top: 0;
    background-color: limegreen;
    transform: scale(1);
  }
  25% {
    left: 250px;
    top: 0;
    background-color: orange;
    transform: scale(1);
  }
  50% {
    left:250px;
    top: 250px;
    background-color: red;
    transform: scale(1);
  }
  75% {
    left: 0;
    top: 250px;
    background-color:maroon;
    transform: scale(1);
  }
}
.clearfix:after {
  clear: both;
  display: table;
  content: "";
}