#sky {
  background: black;
  margin: auto;
  width: 50vw;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
@-moz-document url-prefix() {
  #sky {
    filter: none;
  }
}
#sky div {
  transform-style: preserve-3d;
}
#sky .bird {
  -webkit-animation: fly 10000ms linear infinite;
          animation: fly 10000ms linear infinite;
}
#sky .bird .wind {
  position: absolute;
  right: 20%;
  width: 4px;
  height: 200px;
  margin-left: -2px;
  overflow: hidden;
}
#sky .bird .wind:nth-child(1) {
  transform: translate3d(91px, 122px, 84px) rotateY(90deg);
}
#sky .bird .wind:nth-child(1)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 7, 0.3);
  border-radius: 999px;
  transform: translateY(-100px);
  -webkit-animation: wind 19113ms 4043ms linear infinite;
          animation: wind 19113ms 4043ms linear infinite;
}
#sky .bird .wind:nth-child(2) {
  transform: translate3d(-22px, 59px, -77px) rotateY(90deg);
}
#sky .bird .wind:nth-child(2)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 15, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2078ms 1319ms linear infinite;
          animation: wind 2078ms 1319ms linear infinite;
}
#sky .bird .wind:nth-child(3) {
  transform: translate3d(16px, -8px, -56px) rotateY(90deg);
}
#sky .bird .wind:nth-child(3)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 234, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1908ms 2511ms linear infinite;
          animation: wind 1908ms 2511ms linear infinite;
}
#sky .bird .wind:nth-child(4) {
  transform: translate3d(-113px, 136px, 16px) rotateY(90deg);
}
#sky .bird .wind:nth-child(4)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 101, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2711ms 1756ms linear infinite;
          animation: wind 2711ms 1756ms linear infinite;
}
#sky .bird .wind:nth-child(5) {
  transform: translate3d(78px, 83px, 91px) rotateY(90deg);
}
#sky .bird .wind:nth-child(5)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 211, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2381ms 4274ms linear infinite;
          animation: wind 2381ms 4274ms linear infinite;
}
#sky .bird .wind:nth-child(6) {
  transform: translate3d(-133px, 63px, 24px) rotateY(90deg);
}
#sky .bird .wind:nth-child(6)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 19, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2987ms 3153ms linear infinite;
          animation: wind 2987ms 3153ms linear infinite;
}
#sky .bird .wind:nth-child(7) {
  transform: translate3d(-167px, 53px, 93px) rotateY(90deg);
}
#sky .bird .wind:nth-child(7)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 227, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1439ms 4137ms linear infinite;
          animation: wind 1439ms 4137ms linear infinite;
}
#sky .bird .wind:nth-child(8) {
  transform: translate3d(33px, -87px, 16px) rotateY(90deg);
}
#sky .bird .wind:nth-child(8)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 24, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2381ms 2066ms linear infinite;
          animation: wind 2381ms 2066ms linear infinite;
}
#sky .bird .wind:nth-child(9) {
  transform: translate3d(-125px, 74px, 44px) rotateY(90deg);
}
#sky .bird .wind:nth-child(9)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 76, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1130ms 3772ms linear infinite;
          animation: wind 1130ms 3772ms linear infinite;
}
#sky .bird .wind:nth-child(10) {
  transform: translate3d(39px, 89px, 36px) rotateY(90deg);
}
#sky .bird .wind:nth-child(10)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 183, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1815ms 2154ms linear infinite;
          animation: wind 1815ms 2154ms linear infinite;
}
#sky .bird .wind:nth-child(11) {
  transform: translate3d(-148px, 73px, -31px) rotateY(90deg);
}
#sky .bird .wind:nth-child(11)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 74, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2813ms 1287ms linear infinite;
          animation: wind 2813ms 1287ms linear infinite;
}
#sky .bird_body {
  position: relative;
  width: 30px;
  height: 40px;
  background: #81a1f9;
}
#sky .bird_head {
  position: absolute;
  top: -30px;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #80a4df;
  border-left: 15px solid transparent;
  transform-origin: 50% 100%;
  transform: rotateX(-20deg);
}
#sky .bird_wing_left {
  position: absolute;
  left: -30px;
  height: 30px;
  border-right: 30px solid #a890d8;
  border-bottom: 10px solid transparent;
  transform-origin: 100% 0;
  -webkit-animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
#sky .bird_wing_left_top {
  position: absolute;
  left: -30px;
  border-right: 30px solid #c6aadb;
  border-bottom: 30px solid transparent;
  transform-origin: 100% 0;
  -webkit-animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
          animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
}
#sky .bird_wing_right {
  position: absolute;
  left: 30px;
  height: 30px;
  border-left: 30px solid #839cd7;
  border-bottom: 10px solid transparent;
  transform-origin: 0 0;
  -webkit-animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
#sky .bird_wing_right_top {
  position: absolute;
  border-left: 30px solid #af9cce;
  border-bottom: 30px solid transparent;
  transform-origin: 0 0;
  -webkit-animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
          animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
}
#sky .bird_tail_left {
  position: absolute;
  top: 40px;
  border-right: 30px solid transparent;
  border-top: 40px solid #be75de;
  transform-origin: 50% 0;
  transform: rotateX(-20deg);
}
#sky .bird_tail_right {
  position: absolute;
  top: 40px;
  border-left: 30px solid transparent;
  border-top: 40px solid #6cb6e8;
  transform-origin: 50% 0;
  transform: rotateX(-20deg);
}

@-webkit-keyframes fly {
  0% {
    transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
  }
  100% {
    transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
  }
}

@keyframes fly {
  0% {
    transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
  }
  100% {
    transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
  }
}
@-webkit-keyframes wingLeft {
  0% {
    transform: rotateY(-40deg);
  }
  100% {
    transform: rotateY(40deg);
  }
}
@keyframes wingLeft {
  0% {
    transform: rotateY(-40deg);
  }
  100% {
    transform: rotateY(40deg);
  }
}
@-webkit-keyframes wingRight {
  0% {
    transform: rotateY(40deg);
  }
  100% {
    transform: rotateY(-40deg);
  }
}
@keyframes wingRight {
  0% {
    transform: rotateY(40deg);
  }
  100% {
    transform: rotateY(-40deg);
  }
}
@-webkit-keyframes wind {
  0% {
    transform: translateY(-300px);
  }
  100% {
    transform: translateY(200px);
  }
}
@keyframes wind {
  0% {
    transform: translateY(-300px);
  }
  100% {
    transform: translateY(200px);
  }
}