.box {
  background-color: brown;
  margin-top: 50px;
  margin-left: 50px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  animation: move-and-change-color-box 3s infinite;
  position: absolute;
}

@keyframes move-and-change-color-box {
  0% {
    background-color: red;
    top: 0;
    left: 0;
    rotate: 0deg;
  }

  25% {
    background-color: blue;
    top: 200px;
    left: 0;
    rotate: 90deg;
  }

  50% {
    background-color: green;
    top: 200px;
    left: 200px;
    rotate: 180deg;
  }

  75% {
    background-color: yellow;
    top: 0;
    left: 200px;
    rotate: 270deg;
  }

  100% {
    background-color: red;
    top: 0;
    left: 0;
    rotate: 360deg;
  }
}