#circle{
  width: 50px; 
  height: 50px;
  position: relative;
  background-color: lightblue;
  border-radius: 50%;
  animation-name: colorChange;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes colorChange{
  0%{
  background-color: lightblue;
  top: 0px;
  left:0px;
  }
  
  25%{
  background-color: mediumpurple;
  top:200px; 
  transform: scale(2);
  transform: rotate(180deg);
  }
  
  50%{ 
  background-color: lightblue;
  left:600px;
  top:0px;
  transform: scale(1);
  transform: rotate(360deg);
  }
  
  75%{
  background-color: mediumpurple;
  top:200px;  
  transform: scale(2);
  transform: rotate(180deg);
  }
  
  100%{
  background-color: lightblue;
  top: 0px;
  left:0px;
  transform: rotate(360deg);
  }
}