body {
  font-family: Arial, sans-serif;
  padding: 40px;
  background-color: rgb(53, 238, 229);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}


.box{
  width: 100px;
  height: 100px;
  animation: moveBox 2.5s infinite;
}

@keyframes moveBox {
  0% {
  transform: translate(0, 0) rotate(0deg);
  background-color: red;
  border-radius: 0px;
  }
  20%{
  transform: translate(100px, -100px) rotate(45deg);
  background-color: yellow;
  border-radius: 10px;
  }
  40%{
  transform: translate(-200px, 200px) rotate(90deg);
  background-color: green;
  border-radius: 20px;
  }
  60%{
  transform: translate(-300px, -300px) rotate(135deg);
  background-color: blue;
  border-radius: 30px;
  }
  80%{
  transform: translate(-400, -400) rotate(180deg);
  background-color: purple;
  border-radius: 40px;
  }
  100%{
    transform: translate(0, 0) rotate(0deg);
    background-color: pink;
    border-radius: 50px;
  }
  }