body {
  font-family: Arial, sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
  justify-content: center;
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.box{

  background-color: red;
  animation: moveBox 3s infinite
}

@keyframes moveBox {
  0% {
    transform: translate(0, 0px);
    background-color: red;
    width: 50px;
    height: 50px;
  }

  25% {
    transform: translate(0, -200px);
    background-color: rgb(255, 255, 0);
    width: 50px;
    height: 50px;

  }

  50% {
    transform: translate(0, 0px);
    background-color: rgb(0, 242, 255);
    width: 100px;
    height: 100px;
  }

  75% {
    transform: translate(0, -200px);
    background-color: rgb(195, 0, 255);
    width: 100px;
    height: 100px;
  }

  100% {
    transform: translate(0, 0px);
    background-color: red;
    width: 150px;
    height: 150px;
  }
}