.animation-wrapper {
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 575px;
  width: 650px;
  overflow: hidden;
}

.animation-wrapper::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 999;
  content: "";
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #ffffff 20%,
    #ffffff00 60%,
    #ffffff00 100%
  );
}

.road {
  width: 3500px;
  max-width: 3500px !important;
  max-height: 2160px !important;
  position: absolute;
  top: -280px;
  left: -600px;
  animation: roadjalan 10s normal ease-out infinite;
}
@keyframes roadjalan {
  0% {
    transform: translatex(-1000px) translatey(-574px);
  }
  20% {
    transform: translatex(-0px) translatey(-0px);
  }
  25% {
    transform: translatex(-0px) translatey(-0px);
  }
  50% {
    transform: translatex(-200px) translatey(-114.8px);
  }

  90% {
    transform: translatex(-1000px) translatey(-574px);
  }
  100% {
    transform: translatex(-1000px) translatey(-574px);
  }
}

.truck {
  position: absolute;
  z-index: 2;
  top: 30px;
  height: 300px;
  animation: truck-first-animation 10s normal ease-out infinite;
  transform: translatex(-500px) translatey(-287px);
}

@keyframes truck-first-animation {
  0% {
    transform: translatex(800px) translatey(459.5px);
  }
  20% {
    transform: translatex(-100px) translatey(-57.4px);
  }
  25% {
    transform: translatex(-100px) translatey(-57.4px);
  }
  50% {
    transform: translatex(-500px) translatey(-287px);
  }
}

.orang {
  position: absolute;
  z-index: 2;
  top: 100px;
  left: 120px;
  height: 112px;
  animation: orang-first-animation 10s normal ease-out infinite;
  transform: translatex(-50px) translatey(-28.7px);
}

@keyframes orang-first-animation {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  43%{
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translatex(260px) translatey(149.24px);
  }
  70% {
    opacity: 0;
    transform: translatex(-200px) translatey(-114.8px);
  }
  100% {
    transform: translatex(-200px) translatey(-114.8px);
  }
}

.pesawat {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 60px;
  height: 300px;
  transform: translatex(-500px) translatey(-287px);
  animation: pesawat 10s normal ease-out infinite;
  /* box-shadow: 5px 5px 1px rgba(0,0,0,0.5); */
}

@keyframes pesawat {
  0% {
    top: 10px;
    transform: translatex(800px) translatey(459.5px);
  }
  30% {
    transform: translatex(800px) translatey(459.5px);
  }
  50% {
    top: 10px;
    transform: translatex(200px) translatey(144.8px);
  }
  60% {
    top: -100px;
    transform: translatex(200px) translatey(144.8px) rotateZ(-10deg);
  }
  70% {
    top: -100px;
    transform: translatex(200px) translatey(144.8px) rotateZ(-10deg);
  }
  80% {
    top: -200px;
    transform: translatex(1000px) translatey(574px) rotateZ(-10deg);
  }
  100% {
    top: -200px;
    transform: translatex(1000px) translatey(574px) rotateZ(-10deg);
  }
}
.plane-shadow {
  position: absolute;
  width: 390px;
  opacity: 0;
  top: 80px;
  left: 40px;
  z-index: 2;
  transform: translatex(150px) translatey(86.1px) rotateZ(-10deg);
  animation: shadow 10s normal ease-out infinite;
}

@keyframes shadow {
  50% {
    opacity: 0;
    transform: translatex(150px) translatey(86.1px) rotateZ(-10deg);
  }
  60% {
    opacity: 0.5;
    transform: translatex(150px) translatey(86.1px) rotateZ(-10deg);
  }
  70% {
    opacity: 0.5;
    transform: translatex(150px) translatey(86.1px) rotateZ(-10deg);
  }
  80% {
    opacity: 0.5;
    transform: translatex(1000px) translatey(574px) rotateZ(-10deg);
  }
  100% {
    opacity: 0.5;
    transform: translatex(1000px) translatey(574px) rotateZ(-10deg);
  }
}

.ribbon {
  position: absolute;
  z-index: 3;
  top: 50px;
  left: 0px;
  opacity: 1;
  width: 225px;
  transform: translatex(-500px) translatey(-287px);
  animation: ribbon 10s normal ease-out infinite;
}

@keyframes ribbon {
  0% {
    opacity: 0;
    top: 70px;
    transform: translatex(800px) translatey(459.5px);
  }
  30% {
    transform: translatex(800px) translatey(459.5px);
  }
  50% {
    top: 70px;
    opacity: 0;
    transform: translatex(150px) translatey(86.1px);
  }
  60% {
    opacity: 0;
    top: 20px;
    transform: translatex(150px) translatey(86.1px) rotateZ(-10deg);
  }
  70% {
    opacity: 1;
    top: 10px;
    transform: translatex(150px) translatey(86.1px) rotateZ(-10deg);
  }
  80% {
    top: -130px;
    transform: translatex(1000px) translatey(574px) rotateZ(-10deg);
  }
  100% {
    top: -130px;
    transform: translatex(1000px) translatey(574px) rotateZ(-10deg);
  }
}