.parachute {
  margin: 400px auto;
  width: 400px;
  animation: xAxis 20s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}
.parachute__img {
  animation: yAxis 20s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}
.parachute__img:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: url("https://dl.dropboxusercontent.com/s/7xthrrako1qpxy9/parachute.svg") no-repeat;
  animation: swing ease-in-out 1s infinite alternate;
  transform-origin: center -20px;
}

.parachute2 {
  margin: 400px auto;
  width: 400px;
  animation: xAxis 30s infinite cubic-bezier(0.02, 0.01, 0.21, 2);
}
.parachute__img2 {
  animation: yAxis 30s infinite cubic-bezier(0.3, 0.27, 0.07, 6.64);
}
.parachute__img2:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: url("https://dl.dropboxusercontent.com/s/7xthrrako1qpxy9/parachute.svg") no-repeat;
  animation: swing ease-in-out 1s infinite alternate;
  transform-origin: center -20px;
}

.plane1 {
  background: url("../images/aeroplane.svg")
    no-repeat;
  width: 108px;
  height: 108px;
  position: absolute;
  top: 160px;
  left: -108px;
  animation: right linear 10s infinite;
}

.plane2 {
  background: url("../images/aeroplane.svg")
    no-repeat;
  width: 108px;
  height: 108px;
  position: absolute;
  top: 480px;
  left: -98px;
  animation: right linear 8s infinite;
}

.rocket {
  background: url("../images/rockkett.png")
    no-repeat;
  width: 1080px;
  height: 1080px;
  position: absolute;
  top: 100px;
  left: -98px;
  animation: right linear 9s infinite;
}


.j1 {
  background: url("../images/f16.png")
    no-repeat;
  width: 1080px;
  height: 1080px;
  position: absolute;
  top: 50px;
  animation: tiltAndMove 5s linear ;
}

@keyframes tiltAndMove {
  0% {
      transform: translateX(0) rotate(0deg);
  }
  25% {
      transform: translateX(-500px) rotate(-20deg);
  }
  50% {
      transform: translateX(-200px) rotate(80deg);
  }
  75% {
      transform: translateX(-300px) rotate(-30deg);
  }
  100% {
      transform: translateX(-10px) rotate(-60deg);
  }
}

@keyframes yAxis {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-200px);
  }
}

@keyframes xAxis {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(200px);
  }
}

@keyframes swing {
  0% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes right {
  0% {
    left: -108px;
  }
  100% {
    left: calc(100% + 108px);
  }
}