.div {
  width: 125px;
  height: 125px;
  z-index: 100;
  position: relative;
  animation-name: one;
  animation-duration: 7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes one {
  0% {
    left: 0px;
    top: 0px;
  }

  5% {
    left: 300px;
    top: 0px;
  }

  10% {
    left: 400px;
    top: 0px;
    transform: rotate(720deg);
  }

  15% {
    left: 200px;
    top: 0px;
  }

  30% {
    left: 500px;
    top: 500px;
  }

  35% {
    left: 500px;
    top: 400px;
  }

  40% {
    left: 800px;
    top: 0px;
    transform: rotate(900deg);
  }

  50% {
    left: 0px;
    top: 600px;
  }

  60% {
    left: 300px;
    top: 50px;
    transform: rotate(540deg);
  }

  70% {
    left: 600px;
    top: 200px;
  }

  80% {
    left: 200px;
    top: 0px;
  }

  90% {
    left: 1000px;
    top: 900px;
    transform: rotate(1080deg);
  }

  100% {
    left: 0px;
    top: 0px;
  }
}

.div1 {
  width: 100px;
  height: 100px;
  z-index: 2;
  font-size: 120px;
  position: relative;
  animation-name: two;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes two {
  0% {
    left: 200px;
    top: 180px;
    transform: rotate(1800deg);
  }

  50% {
    left: 1200px;
    top: 0px;
  }

  75% {
    left: 800px;
    top: 300px;
  }

  100% {
    left: 200px;
    top: 180px;
  }
}

.div2 {
  width: 100px;
  height: 100px;
  z-index: 2;
  font-size: 120px;
  position: relative;
  animation-name: three;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes three {
  0% {
    left: 1400px;
    top: 180px;
  }

  15% {
    left: 300px;
    top: 180px;
    transform: rotate(1800deg);
  }

  100% {
    left: 1400px;
    top: 180px;
  }
}

.div3 {
  display: flex;
  justify-content: end;
  width: 140px;
  height: 100px;
  z-index: 50;
  position: relative;
  animation-name: four;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes four {
  0% {
    left: 2000px;
    top: 400px;
  }

  10% {
    left: 2000px;
    top: 400px;
  }

  20% {
    left: 300px;
    top: 400px;
  }

  38% {
    left: 300px;
    top: 400px;
  }

  40% {
    left: 300px;
    top: 400px;
    transform: rotateY(180deg);
  }

  41% {
    left: 300px;
    top: 400px;
  }

  45% {
    left: 300px;
    top: 400px;
  }

  50% {
    left: 2000px;
    top: 400px;
  }

  100% {
    left: 2000px;
    top: 400px;
  }
}

.div4 {
  display: flex;
  justify-content: end;
  z-index: 1;
  width: 145px;
  height: 26px;
  position: relative;
  animation-name: five;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes five {
  0% {
    left: 380px;
    top: 170px;
  }

  20% {
    left: 380px;
    top: 170px;
    width: 145px;
    height: 26px;
  }

  40% {
    left: 380px;
    top: 170px;
    width: 145px;
    height: 26px;
    transform: scale(3, 3);
  }

  50% {
    left: 380px;
    top: 170px;
  }

  78% {
    left: 380px;
    top: 170px;
    transform: scale(5, 5);
  }

  80% {
    left: 380px;
    top: 170px;
  }

  100% {
    left: 380px;
    top: 170px;
    width: 145px;
    height: 26px;
  }
}

.div5 {
  display: flex;
  justify-content: end;
  width: 125px;
  height: 125px;
  z-index: 99;
  position: relative;
  animation-name: six;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes six {
  0% {
    left: 0px;
    top: 100px;
  }

  10% {
    left: 100px;
    top: -400px;
  }

  15% {
    left: 300px;
    top: 0px;
  }

  20% {
    left: 150px;
    top: 300px;
  }

  30% {
    left: 325px;
    top: -500px;
  }

  40% {
    left: 500px;
    top: 400px;
  }

  50% {
    left: 580px;
    top: -300px;
  }

  60% {
    left: 650px;
    top: 350px;
  }

  70% {
    left: 1500px;
    top: -100px;
  }

  75% {
    left: 1400px;
    top: 400px;
  }

  80% {
    left: 1000px;
    top: -500px;
  }

  85% {
    left: 400px;
    top: -100px;
  }

  90% {
    left: 1550px;
    top: 500px;
  }

  100% {
    left: 0px;
    top: 100px;
  }
}

.div6 {
  display: flex;
  justify-content: end;
  z-index: 1;
  width: 145px;
  height: 26px;
  position: relative;
  animation-name: seven;
  animation-duration: 25s;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

@keyframes seven {
  0% {
    left: 410px;
    top: 0px;
  }

  10% {
    left: 410px;
    top: -150px;
    transform: scale(4, 4);
  }

  15% {
    left: 410px;
    top: -250px;
  }

  20% {
    left: 410px;
    top: -500px;
  }

  40% {
    left: 410px;
    top: -500px;
  }

  50% {
    left: 410px;
    top: -500px;
  }

  100% {
    left: 410px;
    top: -500px;
  }

}

.div7 {
  z-index: 101;
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: eight;
  animation-duration: 30s;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

@keyframes eight {
  0% {
    left: 2000px;
    top: -500px;
  }

  20% {
    left: 2000px;
    top: -500px;
  }

  49% {
    left: 700px;
    top: -500px;
  }

  50% {
    left: 700px;
    top: -500px;
    transform: scale(15, 15);
  }

  100% {
    left: 0px;
    top: -500px;
    transfrom: scale(15, 20);
  }
}

.div01 {
  position: relative;
  margin-left: 500px;
  width: 500px;
  height: 25px;
  background-color: white;
  animation-name: first;
  animation-duration: 6s;
  z-index: 1;
}

@keyframes first {
  0% {
    left: -500px;
    top: -20px;
  }

  40% {
    left: -500px;
    top: -20px;
  }

  100% {
    left: 500px;
    top: -20px;
  }
}

.div02 {
  position: relative;
  margin-left: 500px;
  width: 500px;
  height: 25px;
  background-color: white;
  animation-name: second;
  animation-duration: 3s;
  z-index: 1;
}

@keyframes second {
  0% {
    left: -500px;
    top: -20px;
  }

  100% {
    left: 500px;
    top: -20px;
  }
}

.div03 {
  position: relative;
  margin-left: 500px;
  width: 500px;
  height: 25px;
  background-color: white;
  animation-name: third;
  animation-duration: 8s;
  z-index: 1;
}

@keyframes third {
  0% {
    left: -500px;
    top: -20px;
  }

  50% {
    left: -500px;
    top: -20px;
  }

  100% {
    left: 500px;
    top: -20px;
  }
}

.div04 {
  position: relative;
  margin-left: 500px;
  width: 550px;
  height: 25px;
  background-color: white;
  animation-name: forth;
  animation-duration: 10s;
  z-index: 1;
}

@keyframes forth {
  0% {
    left: -500px;
    top: -20px;
  }

  50% {
    left: -500px;
    top: -20px;
  }

  100% {
    left: 500px;
    top: -20px;
  }
}