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

.box{
  width: 100px;
  height: 100px;
  background-color: rgb(0, 255, 200);
  animation: moveBox 3s infinite;
  border-radius: 100px;
}
.element{
  width: 100px;
  height: 100px;
  background-color: rgb(0, 255, 200);
  animation: moveBox 3s infinite;
  border-radius: 100px;
}

@keyframes moveBox {
  0%{
    transform: translateX(0);
    background-color: rgb(255, 0, 0);
  }
 20% {
    transform: translateX(1600px);
    background-color: wheat;
    width: 150px;
    border-radius: 60px;
    line-height: 50px;
  }
  35%{
    transform: translateY(750px);
    background-color: chocolate;
    width: 100px;
    height: 150px;
  }
 50% {
   transform: translateX(0);
   background-color: fuchsia;
   width: 150px;
 }
    
  65% {
  transform: translateY(750px);
  background-color: blueviolet;
  height: 150px;
  border-radius: 25px;
  }
    75% {
      transform: translateX(1000px);
      background-color: aquamarine;
    }
   90% {
     transform: translateX(1000px)
    }

}

@keyframes moveElement {
0% {
    transform: translateX(0);
    background-color: rgb(11, 247, 188);
  }

  20% {
    transform: translateY(1000px);
    background-color: wheat;
    width: 150px;
    border-radius: 60px;
    line-height: 50px;
  }

  35% {
    transform: translateX(500px);
    background-color: rgb(115, 78, 139);
    width: 100px;
    height: 150px;
  }

  50% {
    transform: translateY(0);
    background-color: rgb(0, 255, 213);
    width: 150px;
  }

  65% {
    transform: translateX(650px);
    background-color: blueviolet;
    height: 150px;
    border-radius: 25px;
  }

  75% {
    transform: translateY(1200px);
    background-color: aquamarine;
  }

  90% {
    transform: translateX(800px)
  }


}