28.02.2018 1 909 Codepen

Летящий космический корабль на чистом CSS

Анимация летящего космического корабля в космосе реализованная только на CSS

HTML


<div id="awing">
  <div class="stars">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
  </div>
  <div class="fly_x">
    <div class="fly_y">
      <div class="fly_z">
        <div class="body">
          <div class="cockpit">
            <div class="under"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="edge_left"></div>
            <div class="edge_right"></div>
            <div class="boosts">
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
              <div class="boost"></div>
            </div>
          </div>
          <div class="wing_left">
            <div class="under"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
          </div>
          <div class="wing_right">
            <div class="under"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-perspective: 500px;
          perspective: 500px;
}

#awing {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: scale(1.5) rotateX(80deg);
          transform: scale(1.5) rotateX(80deg);
  -webkit-animation: 10000ms cameraRotate cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
          animation: 10000ms cameraRotate cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
}
#awing .stars {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#awing .stars .star {
  position: absolute;
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.8);
}
#awing .stars .star:nth-child(1) {
  height: 58px;
  top: 141px;
  left: 79px;
  -webkit-animation: shootingStar1 1393ms linear infinite, fadeInOut 1393ms linear infinite;
          animation: shootingStar1 1393ms linear infinite, fadeInOut 1393ms linear infinite;
}
@-webkit-keyframes shootingStar1 {
  0% {
    -webkit-transform: translateY(148px) translateZ(-113px);
            transform: translateY(148px) translateZ(-113px);
  }
  100% {
    -webkit-transform: translateY(-734px) translateZ(-113px);
            transform: translateY(-734px) translateZ(-113px);
  }
}
@keyframes shootingStar1 {
  0% {
    -webkit-transform: translateY(148px) translateZ(-113px);
            transform: translateY(148px) translateZ(-113px);
  }
  100% {
    -webkit-transform: translateY(-734px) translateZ(-113px);
            transform: translateY(-734px) translateZ(-113px);
  }
}
#awing .stars .star:nth-child(2) {
  height: 54px;
  top: 129px;
  left: -313px;
  -webkit-animation: shootingStar2 1317ms linear infinite, fadeInOut 1317ms linear infinite;
          animation: shootingStar2 1317ms linear infinite, fadeInOut 1317ms linear infinite;
}
@-webkit-keyframes shootingStar2 {
  0% {
    -webkit-transform: translateY(196px) translateZ(28px);
            transform: translateY(196px) translateZ(28px);
  }
  100% {
    -webkit-transform: translateY(-749px) translateZ(28px);
            transform: translateY(-749px) translateZ(28px);
  }
}
@keyframes shootingStar2 {
  0% {
    -webkit-transform: translateY(196px) translateZ(28px);
            transform: translateY(196px) translateZ(28px);
  }
  100% {
    -webkit-transform: translateY(-749px) translateZ(28px);
            transform: translateY(-749px) translateZ(28px);
  }
}
#awing .stars .star:nth-child(3) {
  height: 54px;
  top: 310px;
  left: 307px;
  -webkit-animation: shootingStar3 1381ms linear infinite, fadeInOut 1381ms linear infinite;
          animation: shootingStar3 1381ms linear infinite, fadeInOut 1381ms linear infinite;
}
@-webkit-keyframes shootingStar3 {
  0% {
    -webkit-transform: translateY(196px) translateZ(38px);
            transform: translateY(196px) translateZ(38px);
  }
  100% {
    -webkit-transform: translateY(-839px) translateZ(38px);
            transform: translateY(-839px) translateZ(38px);
  }
}
@keyframes shootingStar3 {
  0% {
    -webkit-transform: translateY(196px) translateZ(38px);
            transform: translateY(196px) translateZ(38px);
  }
  100% {
    -webkit-transform: translateY(-839px) translateZ(38px);
            transform: translateY(-839px) translateZ(38px);
  }
}
#awing .stars .star:nth-child(4) {
  height: 43px;
  top: 404px;
  left: -135px;
  -webkit-animation: shootingStar4 1747ms linear infinite, fadeInOut 1747ms linear infinite;
          animation: shootingStar4 1747ms linear infinite, fadeInOut 1747ms linear infinite;
}
@-webkit-keyframes shootingStar4 {
  0% {
    -webkit-transform: translateY(271px) translateZ(299px);
            transform: translateY(271px) translateZ(299px);
  }
  100% {
    -webkit-transform: translateY(-720px) translateZ(299px);
            transform: translateY(-720px) translateZ(299px);
  }
}
@keyframes shootingStar4 {
  0% {
    -webkit-transform: translateY(271px) translateZ(299px);
            transform: translateY(271px) translateZ(299px);
  }
  100% {
    -webkit-transform: translateY(-720px) translateZ(299px);
            transform: translateY(-720px) translateZ(299px);
  }
}
#awing .stars .star:nth-child(5) {
  height: 27px;
  top: 61px;
  left: 401px;
  -webkit-animation: shootingStar5 1511ms linear infinite, fadeInOut 1511ms linear infinite;
          animation: shootingStar5 1511ms linear infinite, fadeInOut 1511ms linear infinite;
}
@-webkit-keyframes shootingStar5 {
  0% {
    -webkit-transform: translateY(387px) translateZ(-158px);
            transform: translateY(387px) translateZ(-158px);
  }
  100% {
    -webkit-transform: translateY(-991px) translateZ(-158px);
            transform: translateY(-991px) translateZ(-158px);
  }
}
@keyframes shootingStar5 {
  0% {
    -webkit-transform: translateY(387px) translateZ(-158px);
            transform: translateY(387px) translateZ(-158px);
  }
  100% {
    -webkit-transform: translateY(-991px) translateZ(-158px);
            transform: translateY(-991px) translateZ(-158px);
  }
}
#awing .stars .star:nth-child(6) {
  height: 57px;
  top: 89px;
  left: -201px;
  -webkit-animation: shootingStar6 511ms linear infinite, fadeInOut 511ms linear infinite;
          animation: shootingStar6 511ms linear infinite, fadeInOut 511ms linear infinite;
}
@-webkit-keyframes shootingStar6 {
  0% {
    -webkit-transform: translateY(275px) translateZ(-171px);
            transform: translateY(275px) translateZ(-171px);
  }
  100% {
    -webkit-transform: translateY(-868px) translateZ(-171px);
            transform: translateY(-868px) translateZ(-171px);
  }
}
@keyframes shootingStar6 {
  0% {
    -webkit-transform: translateY(275px) translateZ(-171px);
            transform: translateY(275px) translateZ(-171px);
  }
  100% {
    -webkit-transform: translateY(-868px) translateZ(-171px);
            transform: translateY(-868px) translateZ(-171px);
  }
}
#awing .stars .star:nth-child(7) {
  height: 44px;
  top: 39px;
  left: 26px;
  -webkit-animation: shootingStar7 1718ms linear infinite, fadeInOut 1718ms linear infinite;
          animation: shootingStar7 1718ms linear infinite, fadeInOut 1718ms linear infinite;
}
@-webkit-keyframes shootingStar7 {
  0% {
    -webkit-transform: translateY(274px) translateZ(232px);
            transform: translateY(274px) translateZ(232px);
  }
  100% {
    -webkit-transform: translateY(-763px) translateZ(232px);
            transform: translateY(-763px) translateZ(232px);
  }
}
@keyframes shootingStar7 {
  0% {
    -webkit-transform: translateY(274px) translateZ(232px);
            transform: translateY(274px) translateZ(232px);
  }
  100% {
    -webkit-transform: translateY(-763px) translateZ(232px);
            transform: translateY(-763px) translateZ(232px);
  }
}
#awing .stars .star:nth-child(8) {
  height: 48px;
  top: 142px;
  left: -228px;
  -webkit-animation: shootingStar8 1463ms linear infinite, fadeInOut 1463ms linear infinite;
          animation: shootingStar8 1463ms linear infinite, fadeInOut 1463ms linear infinite;
}
@-webkit-keyframes shootingStar8 {
  0% {
    -webkit-transform: translateY(388px) translateZ(246px);
            transform: translateY(388px) translateZ(246px);
  }
  100% {
    -webkit-transform: translateY(-914px) translateZ(246px);
            transform: translateY(-914px) translateZ(246px);
  }
}
@keyframes shootingStar8 {
  0% {
    -webkit-transform: translateY(388px) translateZ(246px);
            transform: translateY(388px) translateZ(246px);
  }
  100% {
    -webkit-transform: translateY(-914px) translateZ(246px);
            transform: translateY(-914px) translateZ(246px);
  }
}
#awing .stars .star:nth-child(9) {
  height: 55px;
  top: 78px;
  left: -359px;
  -webkit-animation: shootingStar9 1860ms linear infinite, fadeInOut 1860ms linear infinite;
          animation: shootingStar9 1860ms linear infinite, fadeInOut 1860ms linear infinite;
}
@-webkit-keyframes shootingStar9 {
  0% {
    -webkit-transform: translateY(362px) translateZ(111px);
            transform: translateY(362px) translateZ(111px);
  }
  100% {
    -webkit-transform: translateY(-980px) translateZ(111px);
            transform: translateY(-980px) translateZ(111px);
  }
}
@keyframes shootingStar9 {
  0% {
    -webkit-transform: translateY(362px) translateZ(111px);
            transform: translateY(362px) translateZ(111px);
  }
  100% {
    -webkit-transform: translateY(-980px) translateZ(111px);
            transform: translateY(-980px) translateZ(111px);
  }
}
#awing .stars .star:nth-child(10) {
  height: 70px;
  top: 479px;
  left: -446px;
  -webkit-animation: shootingStar10 1004ms linear infinite, fadeInOut 1004ms linear infinite;
          animation: shootingStar10 1004ms linear infinite, fadeInOut 1004ms linear infinite;
}
@-webkit-keyframes shootingStar10 {
  0% {
    -webkit-transform: translateY(235px) translateZ(172px);
            transform: translateY(235px) translateZ(172px);
  }
  100% {
    -webkit-transform: translateY(-879px) translateZ(172px);
            transform: translateY(-879px) translateZ(172px);
  }
}
@keyframes shootingStar10 {
  0% {
    -webkit-transform: translateY(235px) translateZ(172px);
            transform: translateY(235px) translateZ(172px);
  }
  100% {
    -webkit-transform: translateY(-879px) translateZ(172px);
            transform: translateY(-879px) translateZ(172px);
  }
}
#awing .stars .star:nth-child(11) {
  height: 54px;
  top: 424px;
  left: 281px;
  -webkit-animation: shootingStar11 682ms linear infinite, fadeInOut 682ms linear infinite;
          animation: shootingStar11 682ms linear infinite, fadeInOut 682ms linear infinite;
}
@-webkit-keyframes shootingStar11 {
  0% {
    -webkit-transform: translateY(177px) translateZ(152px);
            transform: translateY(177px) translateZ(152px);
  }
  100% {
    -webkit-transform: translateY(-830px) translateZ(152px);
            transform: translateY(-830px) translateZ(152px);
  }
}
@keyframes shootingStar11 {
  0% {
    -webkit-transform: translateY(177px) translateZ(152px);
            transform: translateY(177px) translateZ(152px);
  }
  100% {
    -webkit-transform: translateY(-830px) translateZ(152px);
            transform: translateY(-830px) translateZ(152px);
  }
}
#awing .stars .star:nth-child(12) {
  height: 27px;
  top: 358px;
  left: -23px;
  -webkit-animation: shootingStar12 1148ms linear infinite, fadeInOut 1148ms linear infinite;
          animation: shootingStar12 1148ms linear infinite, fadeInOut 1148ms linear infinite;
}
@-webkit-keyframes shootingStar12 {
  0% {
    -webkit-transform: translateY(384px) translateZ(-7px);
            transform: translateY(384px) translateZ(-7px);
  }
  100% {
    -webkit-transform: translateY(-870px) translateZ(-7px);
            transform: translateY(-870px) translateZ(-7px);
  }
}
@keyframes shootingStar12 {
  0% {
    -webkit-transform: translateY(384px) translateZ(-7px);
            transform: translateY(384px) translateZ(-7px);
  }
  100% {
    -webkit-transform: translateY(-870px) translateZ(-7px);
            transform: translateY(-870px) translateZ(-7px);
  }
}
#awing .stars .star:nth-child(13) {
  height: 34px;
  top: 241px;
  left: -262px;
  -webkit-animation: shootingStar13 755ms linear infinite, fadeInOut 755ms linear infinite;
          animation: shootingStar13 755ms linear infinite, fadeInOut 755ms linear infinite;
}
@-webkit-keyframes shootingStar13 {
  0% {
    -webkit-transform: translateY(310px) translateZ(-27px);
            transform: translateY(310px) translateZ(-27px);
  }
  100% {
    -webkit-transform: translateY(-775px) translateZ(-27px);
            transform: translateY(-775px) translateZ(-27px);
  }
}
@keyframes shootingStar13 {
  0% {
    -webkit-transform: translateY(310px) translateZ(-27px);
            transform: translateY(310px) translateZ(-27px);
  }
  100% {
    -webkit-transform: translateY(-775px) translateZ(-27px);
            transform: translateY(-775px) translateZ(-27px);
  }
}
#awing .stars .star:nth-child(14) {
  height: 36px;
  top: 392px;
  left: -133px;
  -webkit-animation: shootingStar14 1881ms linear infinite, fadeInOut 1881ms linear infinite;
          animation: shootingStar14 1881ms linear infinite, fadeInOut 1881ms linear infinite;
}
@-webkit-keyframes shootingStar14 {
  0% {
    -webkit-transform: translateY(335px) translateZ(171px);
            transform: translateY(335px) translateZ(171px);
  }
  100% {
    -webkit-transform: translateY(-843px) translateZ(171px);
            transform: translateY(-843px) translateZ(171px);
  }
}
@keyframes shootingStar14 {
  0% {
    -webkit-transform: translateY(335px) translateZ(171px);
            transform: translateY(335px) translateZ(171px);
  }
  100% {
    -webkit-transform: translateY(-843px) translateZ(171px);
            transform: translateY(-843px) translateZ(171px);
  }
}
#awing .stars .star:nth-child(15) {
  height: 26px;
  top: 78px;
  left: 462px;
  -webkit-animation: shootingStar15 630ms linear infinite, fadeInOut 630ms linear infinite;
          animation: shootingStar15 630ms linear infinite, fadeInOut 630ms linear infinite;
}
@-webkit-keyframes shootingStar15 {
  0% {
    -webkit-transform: translateY(154px) translateZ(24px);
            transform: translateY(154px) translateZ(24px);
  }
  100% {
    -webkit-transform: translateY(-755px) translateZ(24px);
            transform: translateY(-755px) translateZ(24px);
  }
}
@keyframes shootingStar15 {
  0% {
    -webkit-transform: translateY(154px) translateZ(24px);
            transform: translateY(154px) translateZ(24px);
  }
  100% {
    -webkit-transform: translateY(-755px) translateZ(24px);
            transform: translateY(-755px) translateZ(24px);
  }
}
#awing .stars .star:nth-child(16) {
  height: 66px;
  top: 133px;
  left: 266px;
  -webkit-animation: shootingStar16 1680ms linear infinite, fadeInOut 1680ms linear infinite;
          animation: shootingStar16 1680ms linear infinite, fadeInOut 1680ms linear infinite;
}
@-webkit-keyframes shootingStar16 {
  0% {
    -webkit-transform: translateY(241px) translateZ(165px);
            transform: translateY(241px) translateZ(165px);
  }
  100% {
    -webkit-transform: translateY(-768px) translateZ(165px);
            transform: translateY(-768px) translateZ(165px);
  }
}
@keyframes shootingStar16 {
  0% {
    -webkit-transform: translateY(241px) translateZ(165px);
            transform: translateY(241px) translateZ(165px);
  }
  100% {
    -webkit-transform: translateY(-768px) translateZ(165px);
            transform: translateY(-768px) translateZ(165px);
  }
}
#awing .stars .star:nth-child(17) {
  height: 52px;
  top: 97px;
  left: 255px;
  -webkit-animation: shootingStar17 1535ms linear infinite, fadeInOut 1535ms linear infinite;
          animation: shootingStar17 1535ms linear infinite, fadeInOut 1535ms linear infinite;
}
@-webkit-keyframes shootingStar17 {
  0% {
    -webkit-transform: translateY(175px) translateZ(44px);
            transform: translateY(175px) translateZ(44px);
  }
  100% {
    -webkit-transform: translateY(-993px) translateZ(44px);
            transform: translateY(-993px) translateZ(44px);
  }
}
@keyframes shootingStar17 {
  0% {
    -webkit-transform: translateY(175px) translateZ(44px);
            transform: translateY(175px) translateZ(44px);
  }
  100% {
    -webkit-transform: translateY(-993px) translateZ(44px);
            transform: translateY(-993px) translateZ(44px);
  }
}
#awing .stars .star:nth-child(18) {
  height: 28px;
  top: 69px;
  left: -430px;
  -webkit-animation: shootingStar18 1989ms linear infinite, fadeInOut 1989ms linear infinite;
          animation: shootingStar18 1989ms linear infinite, fadeInOut 1989ms linear infinite;
}
@-webkit-keyframes shootingStar18 {
  0% {
    -webkit-transform: translateY(175px) translateZ(22px);
            transform: translateY(175px) translateZ(22px);
  }
  100% {
    -webkit-transform: translateY(-783px) translateZ(22px);
            transform: translateY(-783px) translateZ(22px);
  }
}
@keyframes shootingStar18 {
  0% {
    -webkit-transform: translateY(175px) translateZ(22px);
            transform: translateY(175px) translateZ(22px);
  }
  100% {
    -webkit-transform: translateY(-783px) translateZ(22px);
            transform: translateY(-783px) translateZ(22px);
  }
}
#awing .stars .star:nth-child(19) {
  height: 34px;
  top: 138px;
  left: 244px;
  -webkit-animation: shootingStar19 1876ms linear infinite, fadeInOut 1876ms linear infinite;
          animation: shootingStar19 1876ms linear infinite, fadeInOut 1876ms linear infinite;
}
@-webkit-keyframes shootingStar19 {
  0% {
    -webkit-transform: translateY(234px) translateZ(-132px);
            transform: translateY(234px) translateZ(-132px);
  }
  100% {
    -webkit-transform: translateY(-841px) translateZ(-132px);
            transform: translateY(-841px) translateZ(-132px);
  }
}
@keyframes shootingStar19 {
  0% {
    -webkit-transform: translateY(234px) translateZ(-132px);
            transform: translateY(234px) translateZ(-132px);
  }
  100% {
    -webkit-transform: translateY(-841px) translateZ(-132px);
            transform: translateY(-841px) translateZ(-132px);
  }
}
#awing .stars .star:nth-child(20) {
  height: 48px;
  top: 333px;
  left: 194px;
  -webkit-animation: shootingStar20 1698ms linear infinite, fadeInOut 1698ms linear infinite;
          animation: shootingStar20 1698ms linear infinite, fadeInOut 1698ms linear infinite;
}
@-webkit-keyframes shootingStar20 {
  0% {
    -webkit-transform: translateY(282px) translateZ(290px);
            transform: translateY(282px) translateZ(290px);
  }
  100% {
    -webkit-transform: translateY(-817px) translateZ(290px);
            transform: translateY(-817px) translateZ(290px);
  }
}
@keyframes shootingStar20 {
  0% {
    -webkit-transform: translateY(282px) translateZ(290px);
            transform: translateY(282px) translateZ(290px);
  }
  100% {
    -webkit-transform: translateY(-817px) translateZ(290px);
            transform: translateY(-817px) translateZ(290px);
  }
}
#awing .stars .star:nth-child(21) {
  height: 53px;
  top: 91px;
  left: 14px;
  -webkit-animation: shootingStar21 960ms linear infinite, fadeInOut 960ms linear infinite;
          animation: shootingStar21 960ms linear infinite, fadeInOut 960ms linear infinite;
}
@-webkit-keyframes shootingStar21 {
  0% {
    -webkit-transform: translateY(253px) translateZ(-67px);
            transform: translateY(253px) translateZ(-67px);
  }
  100% {
    -webkit-transform: translateY(-706px) translateZ(-67px);
            transform: translateY(-706px) translateZ(-67px);
  }
}
@keyframes shootingStar21 {
  0% {
    -webkit-transform: translateY(253px) translateZ(-67px);
            transform: translateY(253px) translateZ(-67px);
  }
  100% {
    -webkit-transform: translateY(-706px) translateZ(-67px);
            transform: translateY(-706px) translateZ(-67px);
  }
}
#awing .stars .star:nth-child(22) {
  height: 63px;
  top: 68px;
  left: 221px;
  -webkit-animation: shootingStar22 842ms linear infinite, fadeInOut 842ms linear infinite;
          animation: shootingStar22 842ms linear infinite, fadeInOut 842ms linear infinite;
}
@-webkit-keyframes shootingStar22 {
  0% {
    -webkit-transform: translateY(385px) translateZ(288px);
            transform: translateY(385px) translateZ(288px);
  }
  100% {
    -webkit-transform: translateY(-900px) translateZ(288px);
            transform: translateY(-900px) translateZ(288px);
  }
}
@keyframes shootingStar22 {
  0% {
    -webkit-transform: translateY(385px) translateZ(288px);
            transform: translateY(385px) translateZ(288px);
  }
  100% {
    -webkit-transform: translateY(-900px) translateZ(288px);
            transform: translateY(-900px) translateZ(288px);
  }
}
#awing .stars .star:nth-child(23) {
  height: 48px;
  top: 125px;
  left: -499px;
  -webkit-animation: shootingStar23 1123ms linear infinite, fadeInOut 1123ms linear infinite;
          animation: shootingStar23 1123ms linear infinite, fadeInOut 1123ms linear infinite;
}
@-webkit-keyframes shootingStar23 {
  0% {
    -webkit-transform: translateY(277px) translateZ(-31px);
            transform: translateY(277px) translateZ(-31px);
  }
  100% {
    -webkit-transform: translateY(-886px) translateZ(-31px);
            transform: translateY(-886px) translateZ(-31px);
  }
}
@keyframes shootingStar23 {
  0% {
    -webkit-transform: translateY(277px) translateZ(-31px);
            transform: translateY(277px) translateZ(-31px);
  }
  100% {
    -webkit-transform: translateY(-886px) translateZ(-31px);
            transform: translateY(-886px) translateZ(-31px);
  }
}
#awing .stars .star:nth-child(24) {
  height: 24px;
  top: 322px;
  left: 170px;
  -webkit-animation: shootingStar24 552ms linear infinite, fadeInOut 552ms linear infinite;
          animation: shootingStar24 552ms linear infinite, fadeInOut 552ms linear infinite;
}
@-webkit-keyframes shootingStar24 {
  0% {
    -webkit-transform: translateY(132px) translateZ(258px);
            transform: translateY(132px) translateZ(258px);
  }
  100% {
    -webkit-transform: translateY(-919px) translateZ(258px);
            transform: translateY(-919px) translateZ(258px);
  }
}
@keyframes shootingStar24 {
  0% {
    -webkit-transform: translateY(132px) translateZ(258px);
            transform: translateY(132px) translateZ(258px);
  }
  100% {
    -webkit-transform: translateY(-919px) translateZ(258px);
            transform: translateY(-919px) translateZ(258px);
  }
}
#awing .stars .star:nth-child(25) {
  height: 30px;
  top: 461px;
  left: 273px;
  -webkit-animation: shootingStar25 1983ms linear infinite, fadeInOut 1983ms linear infinite;
          animation: shootingStar25 1983ms linear infinite, fadeInOut 1983ms linear infinite;
}
@-webkit-keyframes shootingStar25 {
  0% {
    -webkit-transform: translateY(317px) translateZ(35px);
            transform: translateY(317px) translateZ(35px);
  }
  100% {
    -webkit-transform: translateY(-980px) translateZ(35px);
            transform: translateY(-980px) translateZ(35px);
  }
}
@keyframes shootingStar25 {
  0% {
    -webkit-transform: translateY(317px) translateZ(35px);
            transform: translateY(317px) translateZ(35px);
  }
  100% {
    -webkit-transform: translateY(-980px) translateZ(35px);
            transform: translateY(-980px) translateZ(35px);
  }
}
#awing .stars .star:nth-child(26) {
  height: 23px;
  top: 221px;
  left: -44px;
  -webkit-animation: shootingStar26 732ms linear infinite, fadeInOut 732ms linear infinite;
          animation: shootingStar26 732ms linear infinite, fadeInOut 732ms linear infinite;
}
@-webkit-keyframes shootingStar26 {
  0% {
    -webkit-transform: translateY(281px) translateZ(-129px);
            transform: translateY(281px) translateZ(-129px);
  }
  100% {
    -webkit-transform: translateY(-704px) translateZ(-129px);
            transform: translateY(-704px) translateZ(-129px);
  }
}
@keyframes shootingStar26 {
  0% {
    -webkit-transform: translateY(281px) translateZ(-129px);
            transform: translateY(281px) translateZ(-129px);
  }
  100% {
    -webkit-transform: translateY(-704px) translateZ(-129px);
            transform: translateY(-704px) translateZ(-129px);
  }
}
#awing .stars .star:nth-child(27) {
  height: 32px;
  top: 405px;
  left: 194px;
  -webkit-animation: shootingStar27 959ms linear infinite, fadeInOut 959ms linear infinite;
          animation: shootingStar27 959ms linear infinite, fadeInOut 959ms linear infinite;
}
@-webkit-keyframes shootingStar27 {
  0% {
    -webkit-transform: translateY(169px) translateZ(202px);
            transform: translateY(169px) translateZ(202px);
  }
  100% {
    -webkit-transform: translateY(-957px) translateZ(202px);
            transform: translateY(-957px) translateZ(202px);
  }
}
@keyframes shootingStar27 {
  0% {
    -webkit-transform: translateY(169px) translateZ(202px);
            transform: translateY(169px) translateZ(202px);
  }
  100% {
    -webkit-transform: translateY(-957px) translateZ(202px);
            transform: translateY(-957px) translateZ(202px);
  }
}
#awing .stars .star:nth-child(28) {
  height: 26px;
  top: 352px;
  left: 1px;
  -webkit-animation: shootingStar28 1035ms linear infinite, fadeInOut 1035ms linear infinite;
          animation: shootingStar28 1035ms linear infinite, fadeInOut 1035ms linear infinite;
}
@-webkit-keyframes shootingStar28 {
  0% {
    -webkit-transform: translateY(279px) translateZ(-2px);
            transform: translateY(279px) translateZ(-2px);
  }
  100% {
    -webkit-transform: translateY(-864px) translateZ(-2px);
            transform: translateY(-864px) translateZ(-2px);
  }
}
@keyframes shootingStar28 {
  0% {
    -webkit-transform: translateY(279px) translateZ(-2px);
            transform: translateY(279px) translateZ(-2px);
  }
  100% {
    -webkit-transform: translateY(-864px) translateZ(-2px);
            transform: translateY(-864px) translateZ(-2px);
  }
}
#awing .stars .star:nth-child(29) {
  height: 57px;
  top: 52px;
  left: 411px;
  -webkit-animation: shootingStar29 1793ms linear infinite, fadeInOut 1793ms linear infinite;
          animation: shootingStar29 1793ms linear infinite, fadeInOut 1793ms linear infinite;
}
@-webkit-keyframes shootingStar29 {
  0% {
    -webkit-transform: translateY(390px) translateZ(83px);
            transform: translateY(390px) translateZ(83px);
  }
  100% {
    -webkit-transform: translateY(-974px) translateZ(83px);
            transform: translateY(-974px) translateZ(83px);
  }
}
@keyframes shootingStar29 {
  0% {
    -webkit-transform: translateY(390px) translateZ(83px);
            transform: translateY(390px) translateZ(83px);
  }
  100% {
    -webkit-transform: translateY(-974px) translateZ(83px);
            transform: translateY(-974px) translateZ(83px);
  }
}
#awing .stars .star:nth-child(30) {
  height: 29px;
  top: 292px;
  left: -372px;
  -webkit-animation: shootingStar30 1386ms linear infinite, fadeInOut 1386ms linear infinite;
          animation: shootingStar30 1386ms linear infinite, fadeInOut 1386ms linear infinite;
}
@-webkit-keyframes shootingStar30 {
  0% {
    -webkit-transform: translateY(140px) translateZ(102px);
            transform: translateY(140px) translateZ(102px);
  }
  100% {
    -webkit-transform: translateY(-751px) translateZ(102px);
            transform: translateY(-751px) translateZ(102px);
  }
}
@keyframes shootingStar30 {
  0% {
    -webkit-transform: translateY(140px) translateZ(102px);
            transform: translateY(140px) translateZ(102px);
  }
  100% {
    -webkit-transform: translateY(-751px) translateZ(102px);
            transform: translateY(-751px) translateZ(102px);
  }
}
#awing .stars .star:nth-child(31) {
  height: 41px;
  top: 233px;
  left: 382px;
  -webkit-animation: shootingStar31 1200ms linear infinite, fadeInOut 1200ms linear infinite;
          animation: shootingStar31 1200ms linear infinite, fadeInOut 1200ms linear infinite;
}
@-webkit-keyframes shootingStar31 {
  0% {
    -webkit-transform: translateY(272px) translateZ(259px);
            transform: translateY(272px) translateZ(259px);
  }
  100% {
    -webkit-transform: translateY(-900px) translateZ(259px);
            transform: translateY(-900px) translateZ(259px);
  }
}
@keyframes shootingStar31 {
  0% {
    -webkit-transform: translateY(272px) translateZ(259px);
            transform: translateY(272px) translateZ(259px);
  }
  100% {
    -webkit-transform: translateY(-900px) translateZ(259px);
            transform: translateY(-900px) translateZ(259px);
  }
}
#awing .stars .star:nth-child(32) {
  height: 42px;
  top: 440px;
  left: -348px;
  -webkit-animation: shootingStar32 1046ms linear infinite, fadeInOut 1046ms linear infinite;
          animation: shootingStar32 1046ms linear infinite, fadeInOut 1046ms linear infinite;
}
@-webkit-keyframes shootingStar32 {
  0% {
    -webkit-transform: translateY(293px) translateZ(233px);
            transform: translateY(293px) translateZ(233px);
  }
  100% {
    -webkit-transform: translateY(-882px) translateZ(233px);
            transform: translateY(-882px) translateZ(233px);
  }
}
@keyframes shootingStar32 {
  0% {
    -webkit-transform: translateY(293px) translateZ(233px);
            transform: translateY(293px) translateZ(233px);
  }
  100% {
    -webkit-transform: translateY(-882px) translateZ(233px);
            transform: translateY(-882px) translateZ(233px);
  }
}
#awing .stars .star:nth-child(33) {
  height: 35px;
  top: 202px;
  left: 424px;
  -webkit-animation: shootingStar33 1413ms linear infinite, fadeInOut 1413ms linear infinite;
          animation: shootingStar33 1413ms linear infinite, fadeInOut 1413ms linear infinite;
}
@-webkit-keyframes shootingStar33 {
  0% {
    -webkit-transform: translateY(331px) translateZ(219px);
            transform: translateY(331px) translateZ(219px);
  }
  100% {
    -webkit-transform: translateY(-812px) translateZ(219px);
            transform: translateY(-812px) translateZ(219px);
  }
}
@keyframes shootingStar33 {
  0% {
    -webkit-transform: translateY(331px) translateZ(219px);
            transform: translateY(331px) translateZ(219px);
  }
  100% {
    -webkit-transform: translateY(-812px) translateZ(219px);
            transform: translateY(-812px) translateZ(219px);
  }
}
#awing .stars .star:nth-child(34) {
  height: 65px;
  top: 273px;
  left: -421px;
  -webkit-animation: shootingStar34 1920ms linear infinite, fadeInOut 1920ms linear infinite;
          animation: shootingStar34 1920ms linear infinite, fadeInOut 1920ms linear infinite;
}
@-webkit-keyframes shootingStar34 {
  0% {
    -webkit-transform: translateY(287px) translateZ(254px);
            transform: translateY(287px) translateZ(254px);
  }
  100% {
    -webkit-transform: translateY(-914px) translateZ(254px);
            transform: translateY(-914px) translateZ(254px);
  }
}
@keyframes shootingStar34 {
  0% {
    -webkit-transform: translateY(287px) translateZ(254px);
            transform: translateY(287px) translateZ(254px);
  }
  100% {
    -webkit-transform: translateY(-914px) translateZ(254px);
            transform: translateY(-914px) translateZ(254px);
  }
}
#awing .stars .star:nth-child(35) {
  height: 32px;
  top: 176px;
  left: 169px;
  -webkit-animation: shootingStar35 1916ms linear infinite, fadeInOut 1916ms linear infinite;
          animation: shootingStar35 1916ms linear infinite, fadeInOut 1916ms linear infinite;
}
@-webkit-keyframes shootingStar35 {
  0% {
    -webkit-transform: translateY(101px) translateZ(248px);
            transform: translateY(101px) translateZ(248px);
  }
  100% {
    -webkit-transform: translateY(-731px) translateZ(248px);
            transform: translateY(-731px) translateZ(248px);
  }
}
@keyframes shootingStar35 {
  0% {
    -webkit-transform: translateY(101px) translateZ(248px);
            transform: translateY(101px) translateZ(248px);
  }
  100% {
    -webkit-transform: translateY(-731px) translateZ(248px);
            transform: translateY(-731px) translateZ(248px);
  }
}
#awing .stars .star:nth-child(36) {
  height: 56px;
  top: 384px;
  left: 435px;
  -webkit-animation: shootingStar36 631ms linear infinite, fadeInOut 631ms linear infinite;
          animation: shootingStar36 631ms linear infinite, fadeInOut 631ms linear infinite;
}
@-webkit-keyframes shootingStar36 {
  0% {
    -webkit-transform: translateY(262px) translateZ(-42px);
            transform: translateY(262px) translateZ(-42px);
  }
  100% {
    -webkit-transform: translateY(-748px) translateZ(-42px);
            transform: translateY(-748px) translateZ(-42px);
  }
}
@keyframes shootingStar36 {
  0% {
    -webkit-transform: translateY(262px) translateZ(-42px);
            transform: translateY(262px) translateZ(-42px);
  }
  100% {
    -webkit-transform: translateY(-748px) translateZ(-42px);
            transform: translateY(-748px) translateZ(-42px);
  }
}
#awing .stars .star:nth-child(37) {
  height: 50px;
  top: 3px;
  left: 73px;
  -webkit-animation: shootingStar37 853ms linear infinite, fadeInOut 853ms linear infinite;
          animation: shootingStar37 853ms linear infinite, fadeInOut 853ms linear infinite;
}
@-webkit-keyframes shootingStar37 {
  0% {
    -webkit-transform: translateY(276px) translateZ(-74px);
            transform: translateY(276px) translateZ(-74px);
  }
  100% {
    -webkit-transform: translateY(-918px) translateZ(-74px);
            transform: translateY(-918px) translateZ(-74px);
  }
}
@keyframes shootingStar37 {
  0% {
    -webkit-transform: translateY(276px) translateZ(-74px);
            transform: translateY(276px) translateZ(-74px);
  }
  100% {
    -webkit-transform: translateY(-918px) translateZ(-74px);
            transform: translateY(-918px) translateZ(-74px);
  }
}
#awing .stars .star:nth-child(38) {
  height: 43px;
  top: 475px;
  left: 413px;
  -webkit-animation: shootingStar38 1353ms linear infinite, fadeInOut 1353ms linear infinite;
          animation: shootingStar38 1353ms linear infinite, fadeInOut 1353ms linear infinite;
}
@-webkit-keyframes shootingStar38 {
  0% {
    -webkit-transform: translateY(126px) translateZ(-73px);
            transform: translateY(126px) translateZ(-73px);
  }
  100% {
    -webkit-transform: translateY(-710px) translateZ(-73px);
            transform: translateY(-710px) translateZ(-73px);
  }
}
@keyframes shootingStar38 {
  0% {
    -webkit-transform: translateY(126px) translateZ(-73px);
            transform: translateY(126px) translateZ(-73px);
  }
  100% {
    -webkit-transform: translateY(-710px) translateZ(-73px);
            transform: translateY(-710px) translateZ(-73px);
  }
}
#awing .stars .star:nth-child(39) {
  height: 40px;
  top: 216px;
  left: -396px;
  -webkit-animation: shootingStar39 1743ms linear infinite, fadeInOut 1743ms linear infinite;
          animation: shootingStar39 1743ms linear infinite, fadeInOut 1743ms linear infinite;
}
@-webkit-keyframes shootingStar39 {
  0% {
    -webkit-transform: translateY(386px) translateZ(40px);
            transform: translateY(386px) translateZ(40px);
  }
  100% {
    -webkit-transform: translateY(-824px) translateZ(40px);
            transform: translateY(-824px) translateZ(40px);
  }
}
@keyframes shootingStar39 {
  0% {
    -webkit-transform: translateY(386px) translateZ(40px);
            transform: translateY(386px) translateZ(40px);
  }
  100% {
    -webkit-transform: translateY(-824px) translateZ(40px);
            transform: translateY(-824px) translateZ(40px);
  }
}
#awing .stars .star:nth-child(40) {
  height: 55px;
  top: 78px;
  left: -375px;
  -webkit-animation: shootingStar40 1998ms linear infinite, fadeInOut 1998ms linear infinite;
          animation: shootingStar40 1998ms linear infinite, fadeInOut 1998ms linear infinite;
}
@-webkit-keyframes shootingStar40 {
  0% {
    -webkit-transform: translateY(209px) translateZ(254px);
            transform: translateY(209px) translateZ(254px);
  }
  100% {
    -webkit-transform: translateY(-759px) translateZ(254px);
            transform: translateY(-759px) translateZ(254px);
  }
}
@keyframes shootingStar40 {
  0% {
    -webkit-transform: translateY(209px) translateZ(254px);
            transform: translateY(209px) translateZ(254px);
  }
  100% {
    -webkit-transform: translateY(-759px) translateZ(254px);
            transform: translateY(-759px) translateZ(254px);
  }
}
#awing .fly_x {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: flyX 18426ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: flyX 18426ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}
#awing .fly_y {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: flyY 19667ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: flyY 19667ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}
#awing .fly_z {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: flyZ 11565ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: flyZ 11565ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}
#awing .body {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: 3000ms barrelRoll cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
          animation: 3000ms barrelRoll cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
}
#awing .cockpit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#awing .cockpit .left {
  width: 30px;
  height: 150px;
  background: -webkit-gradient(linear, left bottom, left top, from(white), to(#cccccc));
  background: linear-gradient(0deg, white 0%, #cccccc 100%);
  -webkit-clip-path: polygon(100% 0%, 0% 25%, 100% 100%);
          clip-path: polygon(100% 0%, 0% 25%, 100% 100%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: rotateY(-45deg);
          transform: rotateY(-45deg);
}
#awing .cockpit .right {
  width: 30px;
  height: 150px;
  background: -webkit-gradient(linear, left bottom, left top, from(#aaaaaa), to(#888888));
  background: linear-gradient(0deg, #aaaaaa 0%, #888888 100%);
  -webkit-clip-path: polygon(0% 0%, 100% 25%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 25%, 0% 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
}
#awing .cockpit .under {
  position: absolute;
  width: 60px;
  height: 150px;
  background: -webkit-gradient(linear, left bottom, left top, from(#666666), to(#333333));
  background: linear-gradient(0deg, #666666 0%, #333333 100%);
  -webkit-clip-path: polygon(14.5% 23.5%, 85.5% 23.5%, 50% 100%);
          clip-path: polygon(14.5% 23.5%, 85.5% 23.5%, 50% 100%);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(10.7deg) rotateY(180deg);
          transform: rotateX(10.7deg) rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#awing .cockpit .back {
  position: absolute;
  width: 60px;
  height: 150px;
  background: radial-gradient(ellipse at center, #ea4c89 0%, #c32361 67%);
  -webkit-clip-path: polygon(14.5% 25%, 85.5% 25%, 50% 6%);
          clip-path: polygon(14.5% 25%, 85.5% 25%, 50% 6%);
  -webkit-transform-origin: 50% 25%;
          transform-origin: 50% 25%;
  -webkit-transform: translateZ(-21.5px) rotateX(-45deg) rotateY(180deg);
          transform: translateZ(-21.5px) rotateX(-45deg) rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#awing .cockpit .edge_left {
  position: absolute;
  width: 80px;
  height: 40px;
  background: #fff;
  background: -webkit-gradient(linear, left bottom, left top, from(white), to(#aaaaaa));
  background: linear-gradient(0deg, white 0%, #aaaaaa 100%);
  -webkit-clip-path: polygon(0% 0%, 80% 15%, 100% 100%);
          clip-path: polygon(0% 0%, 80% 15%, 100% 100%);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: translateX(-70px) translateZ(-20px) rotateY(-20deg) rotateX(20deg);
          transform: translateX(-70px) translateZ(-20px) rotateY(-20deg) rotateX(20deg);
}
#awing .cockpit .edge_right {
  position: absolute;
  width: 80px;
  height: 40px;
  background: -webkit-gradient(linear, left bottom, left top, from(#aaaaaa), to(#888888));
  background: linear-gradient(0deg, #aaaaaa 0%, #888888 100%);
  -webkit-clip-path: polygon(100% 0%, 20% 15%, 0% 100%);
          clip-path: polygon(100% 0%, 20% 15%, 0% 100%);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: translateX(50px) translateZ(-20px) rotateY(20deg) rotateX(20deg);
          transform: translateX(50px) translateZ(-20px) rotateY(20deg) rotateX(20deg);
}
#awing .wing_left {
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 30%;
          transform-origin: 50% 30%;
  -webkit-transform: rotateX(-30deg) translate(-20px, 8px) scaleY(1.2);
          transform: rotateX(-30deg) translate(-20px, 8px) scaleY(1.2);
}
#awing .wing_left .left {
  width: 20px;
  height: 120px;
  background: -webkit-gradient(linear, left bottom, left top, from(#ea4c89), to(#c32361));
  background: linear-gradient(0deg, #ea4c89 0%, #c32361 100%);
  -webkit-clip-path: polygon(100% 5.5%, 0% 25%, 100% 100%);
          clip-path: polygon(100% 5.5%, 0% 25%, 100% 100%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: rotateY(-60deg);
          transform: rotateY(-60deg);
}
#awing .wing_left .right {
  width: 20px;
  height: 120px;
  background: -webkit-gradient(linear, left bottom, left top, from(#ea4c89), to(#c32361));
  background: linear-gradient(0deg, #ea4c89 0%, #c32361 100%);
  -webkit-clip-path: polygon(0% 5.5%, 100% 25%, 0% 100%);
          clip-path: polygon(0% 5.5%, 100% 25%, 0% 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotateY(60deg);
          transform: rotateY(60deg);
}
#awing .wing_left .under {
  position: absolute;
  width: 40px;
  height: 120px;
  background: #c32361;
  -webkit-clip-path: polygon(25% 23.5%, 75% 23.5%, 50% 100%);
          clip-path: polygon(25% 23.5%, 75% 23.5%, 50% 100%);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(11deg) translateZ(-1px) rotateY(180deg);
          transform: rotateX(11deg) translateZ(-1px) rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#awing .wing_left .back {
  position: absolute;
  width: 40px;
  height: 120px;
  background: #ea4c89;
  -webkit-clip-path: polygon(25% 25%, 75% 25%, 50% 0%);
          clip-path: polygon(25% 25%, 75% 25%, 50% 0%);
  -webkit-transform-origin: 50% 25%;
          transform-origin: 50% 25%;
  -webkit-transform: translateZ(-18px) rotateX(-39deg) rotateY(180deg);
          transform: translateZ(-18px) rotateX(-39deg) rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#awing .wing_right {
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 30%;
          transform-origin: 50% 30%;
  -webkit-transform: rotateX(-30deg) translate(40px, 8px) scaleY(1.2);
          transform: rotateX(-30deg) translate(40px, 8px) scaleY(1.2);
}
#awing .wing_right .left {
  width: 20px;
  height: 120px;
  background: -webkit-gradient(linear, left bottom, left top, from(#ea4c89), to(#c32361));
  background: linear-gradient(0deg, #ea4c89 0%, #c32361 100%);
  -webkit-clip-path: polygon(100% 5.5%, 0% 25%, 100% 100%);
          clip-path: polygon(100% 5.5%, 0% 25%, 100% 100%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: rotateY(-60deg);
          transform: rotateY(-60deg);
}
#awing .wing_right .right {
  width: 20px;
  height: 120px;
  background: -webkit-gradient(linear, left bottom, left top, from(#ea4c89), to(#c32361));
  background: linear-gradient(0deg, #ea4c89 0%, #c32361 100%);
  -webkit-clip-path: polygon(0% 5.5%, 100% 25%, 0% 100%);
          clip-path: polygon(0% 5.5%, 100% 25%, 0% 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotateY(60deg);
          transform: rotateY(60deg);
}
#awing .wing_right .under {
  position: absolute;
  width: 40px;
  height: 120px;
  background: #c32361;
  -webkit-clip-path: polygon(25% 23.5%, 75% 23.5%, 50% 100%);
          clip-path: polygon(25% 23.5%, 75% 23.5%, 50% 100%);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(11deg) rotateY(180deg);
          transform: rotateX(11deg) rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#awing .wing_right .back {
  position: absolute;
  width: 40px;
  height: 120px;
  background: #ea4c89;
  -webkit-clip-path: polygon(25% 25%, 75% 25%, 50% 0%);
          clip-path: polygon(25% 25%, 75% 25%, 50% 0%);
  -webkit-transform-origin: 50% 25%;
          transform-origin: 50% 25%;
  -webkit-transform: translateZ(-18px) rotateX(-39deg) rotateY(180deg);
          transform: translateZ(-18px) rotateX(-39deg) rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
#awing .boosts {
  position: absolute;
  left: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: rotateX(12deg);
          transform: rotateX(12deg);
}
#awing .boost {
  position: absolute;
  width: 10px;
  height: 50px;
  margin-left: -5px;
  background: #f697bc;
  -webkit-filter: blur(15px) contrast(15);
          filter: blur(15px) contrast(15);
}
#awing .boost:nth-child(1) {
  height: 42px;
  -webkit-animation: boost1 1166ms linear infinite;
          animation: boost1 1166ms linear infinite;
}
@-webkit-keyframes boost1 {
  0% {
    -webkit-transform: translateZ(-18px) translateY(-58px) translateX(14px) rotateY(340deg);
            transform: translateZ(-18px) translateY(-58px) translateX(14px) rotateY(340deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-2px) translateY(-300px) translateX(31px) rotateY(340deg);
            transform: translateZ(-2px) translateY(-300px) translateX(31px) rotateY(340deg);
    opacity: 0;
  }
}
@keyframes boost1 {
  0% {
    -webkit-transform: translateZ(-18px) translateY(-58px) translateX(14px) rotateY(340deg);
            transform: translateZ(-18px) translateY(-58px) translateX(14px) rotateY(340deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-2px) translateY(-300px) translateX(31px) rotateY(340deg);
            transform: translateZ(-2px) translateY(-300px) translateX(31px) rotateY(340deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(2) {
  height: 67px;
  -webkit-animation: boost2 665ms linear infinite;
          animation: boost2 665ms linear infinite;
}
@-webkit-keyframes boost2 {
  0% {
    -webkit-transform: translateZ(-30px) translateY(-54px) translateX(4px) rotateY(329deg);
            transform: translateZ(-30px) translateY(-54px) translateX(4px) rotateY(329deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-18px) translateY(-300px) translateX(23px) rotateY(329deg);
            transform: translateZ(-18px) translateY(-300px) translateX(23px) rotateY(329deg);
    opacity: 0;
  }
}
@keyframes boost2 {
  0% {
    -webkit-transform: translateZ(-30px) translateY(-54px) translateX(4px) rotateY(329deg);
            transform: translateZ(-30px) translateY(-54px) translateX(4px) rotateY(329deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-18px) translateY(-300px) translateX(23px) rotateY(329deg);
            transform: translateZ(-18px) translateY(-300px) translateX(23px) rotateY(329deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(3) {
  height: 67px;
  -webkit-animation: boost3 637ms linear infinite;
          animation: boost3 637ms linear infinite;
}
@-webkit-keyframes boost3 {
  0% {
    -webkit-transform: translateZ(-19px) translateY(-41px) translateX(5px) rotateY(279deg);
            transform: translateZ(-19px) translateY(-41px) translateX(5px) rotateY(279deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-17px) translateY(-300px) translateX(-22px) rotateY(279deg);
            transform: translateZ(-17px) translateY(-300px) translateX(-22px) rotateY(279deg);
    opacity: 0;
  }
}
@keyframes boost3 {
  0% {
    -webkit-transform: translateZ(-19px) translateY(-41px) translateX(5px) rotateY(279deg);
            transform: translateZ(-19px) translateY(-41px) translateX(5px) rotateY(279deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-17px) translateY(-300px) translateX(-22px) rotateY(279deg);
            transform: translateZ(-17px) translateY(-300px) translateX(-22px) rotateY(279deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(4) {
  height: 70px;
  -webkit-animation: boost4 1588ms linear infinite;
          animation: boost4 1588ms linear infinite;
}
@-webkit-keyframes boost4 {
  0% {
    -webkit-transform: translateZ(-21px) translateY(-45px) translateX(11px) rotateY(134deg);
            transform: translateZ(-21px) translateY(-45px) translateX(11px) rotateY(134deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(-18px) rotateY(134deg);
            transform: translateZ(-5px) translateY(-300px) translateX(-18px) rotateY(134deg);
    opacity: 0;
  }
}
@keyframes boost4 {
  0% {
    -webkit-transform: translateZ(-21px) translateY(-45px) translateX(11px) rotateY(134deg);
            transform: translateZ(-21px) translateY(-45px) translateX(11px) rotateY(134deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(-18px) rotateY(134deg);
            transform: translateZ(-5px) translateY(-300px) translateX(-18px) rotateY(134deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(5) {
  height: 50px;
  -webkit-animation: boost5 1977ms linear infinite;
          animation: boost5 1977ms linear infinite;
}
@-webkit-keyframes boost5 {
  0% {
    -webkit-transform: translateZ(-27px) translateY(-57px) translateX(13px) rotateY(116deg);
            transform: translateZ(-27px) translateY(-57px) translateX(13px) rotateY(116deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-13px) translateY(-300px) translateX(-24px) rotateY(116deg);
            transform: translateZ(-13px) translateY(-300px) translateX(-24px) rotateY(116deg);
    opacity: 0;
  }
}
@keyframes boost5 {
  0% {
    -webkit-transform: translateZ(-27px) translateY(-57px) translateX(13px) rotateY(116deg);
            transform: translateZ(-27px) translateY(-57px) translateX(13px) rotateY(116deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-13px) translateY(-300px) translateX(-24px) rotateY(116deg);
            transform: translateZ(-13px) translateY(-300px) translateX(-24px) rotateY(116deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(6) {
  height: 53px;
  -webkit-animation: boost6 1501ms linear infinite;
          animation: boost6 1501ms linear infinite;
}
@-webkit-keyframes boost6 {
  0% {
    -webkit-transform: translateZ(-14px) translateY(-59px) translateX(7px) rotateY(155deg);
            transform: translateZ(-14px) translateY(-59px) translateX(7px) rotateY(155deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-12px) translateY(-300px) translateX(-20px) rotateY(155deg);
            transform: translateZ(-12px) translateY(-300px) translateX(-20px) rotateY(155deg);
    opacity: 0;
  }
}
@keyframes boost6 {
  0% {
    -webkit-transform: translateZ(-14px) translateY(-59px) translateX(7px) rotateY(155deg);
            transform: translateZ(-14px) translateY(-59px) translateX(7px) rotateY(155deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-12px) translateY(-300px) translateX(-20px) rotateY(155deg);
            transform: translateZ(-12px) translateY(-300px) translateX(-20px) rotateY(155deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(7) {
  height: 61px;
  -webkit-animation: boost7 1604ms linear infinite;
          animation: boost7 1604ms linear infinite;
}
@-webkit-keyframes boost7 {
  0% {
    -webkit-transform: translateZ(-25px) translateY(-56px) translateX(10px) rotateY(343deg);
            transform: translateZ(-25px) translateY(-56px) translateX(10px) rotateY(343deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-4px) translateY(-300px) translateX(18px) rotateY(343deg);
            transform: translateZ(-4px) translateY(-300px) translateX(18px) rotateY(343deg);
    opacity: 0;
  }
}
@keyframes boost7 {
  0% {
    -webkit-transform: translateZ(-25px) translateY(-56px) translateX(10px) rotateY(343deg);
            transform: translateZ(-25px) translateY(-56px) translateX(10px) rotateY(343deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-4px) translateY(-300px) translateX(18px) rotateY(343deg);
            transform: translateZ(-4px) translateY(-300px) translateX(18px) rotateY(343deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(8) {
  height: 67px;
  -webkit-animation: boost8 707ms linear infinite;
          animation: boost8 707ms linear infinite;
}
@-webkit-keyframes boost8 {
  0% {
    -webkit-transform: translateZ(-12px) translateY(-47px) translateX(-8px) rotateY(42deg);
            transform: translateZ(-12px) translateY(-47px) translateX(-8px) rotateY(42deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-17px) translateY(-300px) translateX(-16px) rotateY(42deg);
            transform: translateZ(-17px) translateY(-300px) translateX(-16px) rotateY(42deg);
    opacity: 0;
  }
}
@keyframes boost8 {
  0% {
    -webkit-transform: translateZ(-12px) translateY(-47px) translateX(-8px) rotateY(42deg);
            transform: translateZ(-12px) translateY(-47px) translateX(-8px) rotateY(42deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-17px) translateY(-300px) translateX(-16px) rotateY(42deg);
            transform: translateZ(-17px) translateY(-300px) translateX(-16px) rotateY(42deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(9) {
  height: 49px;
  -webkit-animation: boost9 948ms linear infinite;
          animation: boost9 948ms linear infinite;
}
@-webkit-keyframes boost9 {
  0% {
    -webkit-transform: translateZ(-26px) translateY(-40px) translateX(0px) rotateY(174deg);
            transform: translateZ(-26px) translateY(-40px) translateX(0px) rotateY(174deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-14px) translateY(-300px) translateX(24px) rotateY(174deg);
            transform: translateZ(-14px) translateY(-300px) translateX(24px) rotateY(174deg);
    opacity: 0;
  }
}
@keyframes boost9 {
  0% {
    -webkit-transform: translateZ(-26px) translateY(-40px) translateX(0px) rotateY(174deg);
            transform: translateZ(-26px) translateY(-40px) translateX(0px) rotateY(174deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-14px) translateY(-300px) translateX(24px) rotateY(174deg);
            transform: translateZ(-14px) translateY(-300px) translateX(24px) rotateY(174deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(10) {
  height: 41px;
  -webkit-animation: boost10 1222ms linear infinite;
          animation: boost10 1222ms linear infinite;
}
@-webkit-keyframes boost10 {
  0% {
    -webkit-transform: translateZ(-30px) translateY(-56px) translateX(6px) rotateY(135deg);
            transform: translateZ(-30px) translateY(-56px) translateX(6px) rotateY(135deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(9px) rotateY(135deg);
            transform: translateZ(-5px) translateY(-300px) translateX(9px) rotateY(135deg);
    opacity: 0;
  }
}
@keyframes boost10 {
  0% {
    -webkit-transform: translateZ(-30px) translateY(-56px) translateX(6px) rotateY(135deg);
            transform: translateZ(-30px) translateY(-56px) translateX(6px) rotateY(135deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(9px) rotateY(135deg);
            transform: translateZ(-5px) translateY(-300px) translateX(9px) rotateY(135deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(11) {
  height: 48px;
  -webkit-animation: boost11 719ms linear infinite;
          animation: boost11 719ms linear infinite;
}
@-webkit-keyframes boost11 {
  0% {
    -webkit-transform: translateZ(-11px) translateY(-58px) translateX(-9px) rotateY(316deg);
            transform: translateZ(-11px) translateY(-58px) translateX(-9px) rotateY(316deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-11px) translateY(-300px) translateX(-21px) rotateY(316deg);
            transform: translateZ(-11px) translateY(-300px) translateX(-21px) rotateY(316deg);
    opacity: 0;
  }
}
@keyframes boost11 {
  0% {
    -webkit-transform: translateZ(-11px) translateY(-58px) translateX(-9px) rotateY(316deg);
            transform: translateZ(-11px) translateY(-58px) translateX(-9px) rotateY(316deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-11px) translateY(-300px) translateX(-21px) rotateY(316deg);
            transform: translateZ(-11px) translateY(-300px) translateX(-21px) rotateY(316deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(12) {
  height: 43px;
  -webkit-animation: boost12 671ms linear infinite;
          animation: boost12 671ms linear infinite;
}
@-webkit-keyframes boost12 {
  0% {
    -webkit-transform: translateZ(-14px) translateY(-59px) translateX(5px) rotateY(194deg);
            transform: translateZ(-14px) translateY(-59px) translateX(5px) rotateY(194deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-20px) translateY(-300px) translateX(25px) rotateY(194deg);
            transform: translateZ(-20px) translateY(-300px) translateX(25px) rotateY(194deg);
    opacity: 0;
  }
}
@keyframes boost12 {
  0% {
    -webkit-transform: translateZ(-14px) translateY(-59px) translateX(5px) rotateY(194deg);
            transform: translateZ(-14px) translateY(-59px) translateX(5px) rotateY(194deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-20px) translateY(-300px) translateX(25px) rotateY(194deg);
            transform: translateZ(-20px) translateY(-300px) translateX(25px) rotateY(194deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(13) {
  height: 70px;
  -webkit-animation: boost13 1525ms linear infinite;
          animation: boost13 1525ms linear infinite;
}
@-webkit-keyframes boost13 {
  0% {
    -webkit-transform: translateZ(-20px) translateY(-57px) translateX(-4px) rotateY(255deg);
            transform: translateZ(-20px) translateY(-57px) translateX(-4px) rotateY(255deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-14px) translateY(-300px) translateX(5px) rotateY(255deg);
            transform: translateZ(-14px) translateY(-300px) translateX(5px) rotateY(255deg);
    opacity: 0;
  }
}
@keyframes boost13 {
  0% {
    -webkit-transform: translateZ(-20px) translateY(-57px) translateX(-4px) rotateY(255deg);
            transform: translateZ(-20px) translateY(-57px) translateX(-4px) rotateY(255deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-14px) translateY(-300px) translateX(5px) rotateY(255deg);
            transform: translateZ(-14px) translateY(-300px) translateX(5px) rotateY(255deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(14) {
  height: 58px;
  -webkit-animation: boost14 1975ms linear infinite;
          animation: boost14 1975ms linear infinite;
}
@-webkit-keyframes boost14 {
  0% {
    -webkit-transform: translateZ(-18px) translateY(-56px) translateX(14px) rotateY(354deg);
            transform: translateZ(-18px) translateY(-56px) translateX(14px) rotateY(354deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-7px) translateY(-300px) translateX(28px) rotateY(354deg);
            transform: translateZ(-7px) translateY(-300px) translateX(28px) rotateY(354deg);
    opacity: 0;
  }
}
@keyframes boost14 {
  0% {
    -webkit-transform: translateZ(-18px) translateY(-56px) translateX(14px) rotateY(354deg);
            transform: translateZ(-18px) translateY(-56px) translateX(14px) rotateY(354deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-7px) translateY(-300px) translateX(28px) rotateY(354deg);
            transform: translateZ(-7px) translateY(-300px) translateX(28px) rotateY(354deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(15) {
  height: 43px;
  -webkit-animation: boost15 977ms linear infinite;
          animation: boost15 977ms linear infinite;
}
@-webkit-keyframes boost15 {
  0% {
    -webkit-transform: translateZ(-15px) translateY(-56px) translateX(14px) rotateY(99deg);
            transform: translateZ(-15px) translateY(-56px) translateX(14px) rotateY(99deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-3px) translateY(-300px) translateX(-20px) rotateY(99deg);
            transform: translateZ(-3px) translateY(-300px) translateX(-20px) rotateY(99deg);
    opacity: 0;
  }
}
@keyframes boost15 {
  0% {
    -webkit-transform: translateZ(-15px) translateY(-56px) translateX(14px) rotateY(99deg);
            transform: translateZ(-15px) translateY(-56px) translateX(14px) rotateY(99deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-3px) translateY(-300px) translateX(-20px) rotateY(99deg);
            transform: translateZ(-3px) translateY(-300px) translateX(-20px) rotateY(99deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(16) {
  height: 75px;
  -webkit-animation: boost16 618ms linear infinite;
          animation: boost16 618ms linear infinite;
}
@-webkit-keyframes boost16 {
  0% {
    -webkit-transform: translateZ(-29px) translateY(-49px) translateX(-1px) rotateY(291deg);
            transform: translateZ(-29px) translateY(-49px) translateX(-1px) rotateY(291deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-2px) translateY(-300px) translateX(3px) rotateY(291deg);
            transform: translateZ(-2px) translateY(-300px) translateX(3px) rotateY(291deg);
    opacity: 0;
  }
}
@keyframes boost16 {
  0% {
    -webkit-transform: translateZ(-29px) translateY(-49px) translateX(-1px) rotateY(291deg);
            transform: translateZ(-29px) translateY(-49px) translateX(-1px) rotateY(291deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-2px) translateY(-300px) translateX(3px) rotateY(291deg);
            transform: translateZ(-2px) translateY(-300px) translateX(3px) rotateY(291deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(17) {
  height: 68px;
  -webkit-animation: boost17 734ms linear infinite;
          animation: boost17 734ms linear infinite;
}
@-webkit-keyframes boost17 {
  0% {
    -webkit-transform: translateZ(-22px) translateY(-41px) translateX(12px) rotateY(44deg);
            transform: translateZ(-22px) translateY(-41px) translateX(12px) rotateY(44deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-18px) translateY(-300px) translateX(-23px) rotateY(44deg);
            transform: translateZ(-18px) translateY(-300px) translateX(-23px) rotateY(44deg);
    opacity: 0;
  }
}
@keyframes boost17 {
  0% {
    -webkit-transform: translateZ(-22px) translateY(-41px) translateX(12px) rotateY(44deg);
            transform: translateZ(-22px) translateY(-41px) translateX(12px) rotateY(44deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-18px) translateY(-300px) translateX(-23px) rotateY(44deg);
            transform: translateZ(-18px) translateY(-300px) translateX(-23px) rotateY(44deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(18) {
  height: 62px;
  -webkit-animation: boost18 1188ms linear infinite;
          animation: boost18 1188ms linear infinite;
}
@-webkit-keyframes boost18 {
  0% {
    -webkit-transform: translateZ(-20px) translateY(-50px) translateX(9px) rotateY(70deg);
            transform: translateZ(-20px) translateY(-50px) translateX(9px) rotateY(70deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-17px) translateY(-300px) translateX(-2px) rotateY(70deg);
            transform: translateZ(-17px) translateY(-300px) translateX(-2px) rotateY(70deg);
    opacity: 0;
  }
}
@keyframes boost18 {
  0% {
    -webkit-transform: translateZ(-20px) translateY(-50px) translateX(9px) rotateY(70deg);
            transform: translateZ(-20px) translateY(-50px) translateX(9px) rotateY(70deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-17px) translateY(-300px) translateX(-2px) rotateY(70deg);
            transform: translateZ(-17px) translateY(-300px) translateX(-2px) rotateY(70deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(19) {
  height: 53px;
  -webkit-animation: boost19 1394ms linear infinite;
          animation: boost19 1394ms linear infinite;
}
@-webkit-keyframes boost19 {
  0% {
    -webkit-transform: translateZ(-25px) translateY(-41px) translateX(14px) rotateY(79deg);
            transform: translateZ(-25px) translateY(-41px) translateX(14px) rotateY(79deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-14px) translateY(-300px) translateX(-9px) rotateY(79deg);
            transform: translateZ(-14px) translateY(-300px) translateX(-9px) rotateY(79deg);
    opacity: 0;
  }
}
@keyframes boost19 {
  0% {
    -webkit-transform: translateZ(-25px) translateY(-41px) translateX(14px) rotateY(79deg);
            transform: translateZ(-25px) translateY(-41px) translateX(14px) rotateY(79deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-14px) translateY(-300px) translateX(-9px) rotateY(79deg);
            transform: translateZ(-14px) translateY(-300px) translateX(-9px) rotateY(79deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(20) {
  height: 48px;
  -webkit-animation: boost20 1681ms linear infinite;
          animation: boost20 1681ms linear infinite;
}
@-webkit-keyframes boost20 {
  0% {
    -webkit-transform: translateZ(-21px) translateY(-50px) translateX(12px) rotateY(243deg);
            transform: translateZ(-21px) translateY(-50px) translateX(12px) rotateY(243deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-18px) translateY(-300px) translateX(-12px) rotateY(243deg);
            transform: translateZ(-18px) translateY(-300px) translateX(-12px) rotateY(243deg);
    opacity: 0;
  }
}
@keyframes boost20 {
  0% {
    -webkit-transform: translateZ(-21px) translateY(-50px) translateX(12px) rotateY(243deg);
            transform: translateZ(-21px) translateY(-50px) translateX(12px) rotateY(243deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-18px) translateY(-300px) translateX(-12px) rotateY(243deg);
            transform: translateZ(-18px) translateY(-300px) translateX(-12px) rotateY(243deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(21) {
  height: 74px;
  -webkit-animation: boost21 818ms linear infinite;
          animation: boost21 818ms linear infinite;
}
@-webkit-keyframes boost21 {
  0% {
    -webkit-transform: translateZ(-15px) translateY(-43px) translateX(1px) rotateY(143deg);
            transform: translateZ(-15px) translateY(-43px) translateX(1px) rotateY(143deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-1px) translateY(-300px) translateX(-35px) rotateY(143deg);
            transform: translateZ(-1px) translateY(-300px) translateX(-35px) rotateY(143deg);
    opacity: 0;
  }
}
@keyframes boost21 {
  0% {
    -webkit-transform: translateZ(-15px) translateY(-43px) translateX(1px) rotateY(143deg);
            transform: translateZ(-15px) translateY(-43px) translateX(1px) rotateY(143deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-1px) translateY(-300px) translateX(-35px) rotateY(143deg);
            transform: translateZ(-1px) translateY(-300px) translateX(-35px) rotateY(143deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(22) {
  height: 53px;
  -webkit-animation: boost22 668ms linear infinite;
          animation: boost22 668ms linear infinite;
}
@-webkit-keyframes boost22 {
  0% {
    -webkit-transform: translateZ(-24px) translateY(-58px) translateX(-2px) rotateY(222deg);
            transform: translateZ(-24px) translateY(-58px) translateX(-2px) rotateY(222deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-19px) translateY(-300px) translateX(-9px) rotateY(222deg);
            transform: translateZ(-19px) translateY(-300px) translateX(-9px) rotateY(222deg);
    opacity: 0;
  }
}
@keyframes boost22 {
  0% {
    -webkit-transform: translateZ(-24px) translateY(-58px) translateX(-2px) rotateY(222deg);
            transform: translateZ(-24px) translateY(-58px) translateX(-2px) rotateY(222deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-19px) translateY(-300px) translateX(-9px) rotateY(222deg);
            transform: translateZ(-19px) translateY(-300px) translateX(-9px) rotateY(222deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(23) {
  height: 49px;
  -webkit-animation: boost23 606ms linear infinite;
          animation: boost23 606ms linear infinite;
}
@-webkit-keyframes boost23 {
  0% {
    -webkit-transform: translateZ(-13px) translateY(-40px) translateX(-10px) rotateY(55deg);
            transform: translateZ(-13px) translateY(-40px) translateX(-10px) rotateY(55deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-9px) translateY(-300px) translateX(-7px) rotateY(55deg);
            transform: translateZ(-9px) translateY(-300px) translateX(-7px) rotateY(55deg);
    opacity: 0;
  }
}
@keyframes boost23 {
  0% {
    -webkit-transform: translateZ(-13px) translateY(-40px) translateX(-10px) rotateY(55deg);
            transform: translateZ(-13px) translateY(-40px) translateX(-10px) rotateY(55deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-9px) translateY(-300px) translateX(-7px) rotateY(55deg);
            transform: translateZ(-9px) translateY(-300px) translateX(-7px) rotateY(55deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(24) {
  height: 77px;
  -webkit-animation: boost24 877ms linear infinite;
          animation: boost24 877ms linear infinite;
}
@-webkit-keyframes boost24 {
  0% {
    -webkit-transform: translateZ(-27px) translateY(-57px) translateX(-11px) rotateY(17deg);
            transform: translateZ(-27px) translateY(-57px) translateX(-11px) rotateY(17deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(0px) rotateY(17deg);
            transform: translateZ(-5px) translateY(-300px) translateX(0px) rotateY(17deg);
    opacity: 0;
  }
}
@keyframes boost24 {
  0% {
    -webkit-transform: translateZ(-27px) translateY(-57px) translateX(-11px) rotateY(17deg);
            transform: translateZ(-27px) translateY(-57px) translateX(-11px) rotateY(17deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(0px) rotateY(17deg);
            transform: translateZ(-5px) translateY(-300px) translateX(0px) rotateY(17deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(25) {
  height: 47px;
  -webkit-animation: boost25 1976ms linear infinite;
          animation: boost25 1976ms linear infinite;
}
@-webkit-keyframes boost25 {
  0% {
    -webkit-transform: translateZ(-25px) translateY(-45px) translateX(-6px) rotateY(112deg);
            transform: translateZ(-25px) translateY(-45px) translateX(-6px) rotateY(112deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-12px) translateY(-300px) translateX(18px) rotateY(112deg);
            transform: translateZ(-12px) translateY(-300px) translateX(18px) rotateY(112deg);
    opacity: 0;
  }
}
@keyframes boost25 {
  0% {
    -webkit-transform: translateZ(-25px) translateY(-45px) translateX(-6px) rotateY(112deg);
            transform: translateZ(-25px) translateY(-45px) translateX(-6px) rotateY(112deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-12px) translateY(-300px) translateX(18px) rotateY(112deg);
            transform: translateZ(-12px) translateY(-300px) translateX(18px) rotateY(112deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(26) {
  height: 72px;
  -webkit-animation: boost26 1346ms linear infinite;
          animation: boost26 1346ms linear infinite;
}
@-webkit-keyframes boost26 {
  0% {
    -webkit-transform: translateZ(-16px) translateY(-51px) translateX(-9px) rotateY(298deg);
            transform: translateZ(-16px) translateY(-51px) translateX(-9px) rotateY(298deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-10px) translateY(-300px) translateX(35px) rotateY(298deg);
            transform: translateZ(-10px) translateY(-300px) translateX(35px) rotateY(298deg);
    opacity: 0;
  }
}
@keyframes boost26 {
  0% {
    -webkit-transform: translateZ(-16px) translateY(-51px) translateX(-9px) rotateY(298deg);
            transform: translateZ(-16px) translateY(-51px) translateX(-9px) rotateY(298deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-10px) translateY(-300px) translateX(35px) rotateY(298deg);
            transform: translateZ(-10px) translateY(-300px) translateX(35px) rotateY(298deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(27) {
  height: 76px;
  -webkit-animation: boost27 1253ms linear infinite;
          animation: boost27 1253ms linear infinite;
}
@-webkit-keyframes boost27 {
  0% {
    -webkit-transform: translateZ(-27px) translateY(-55px) translateX(1px) rotateY(225deg);
            transform: translateZ(-27px) translateY(-55px) translateX(1px) rotateY(225deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-2px) translateY(-300px) translateX(21px) rotateY(225deg);
            transform: translateZ(-2px) translateY(-300px) translateX(21px) rotateY(225deg);
    opacity: 0;
  }
}
@keyframes boost27 {
  0% {
    -webkit-transform: translateZ(-27px) translateY(-55px) translateX(1px) rotateY(225deg);
            transform: translateZ(-27px) translateY(-55px) translateX(1px) rotateY(225deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-2px) translateY(-300px) translateX(21px) rotateY(225deg);
            transform: translateZ(-2px) translateY(-300px) translateX(21px) rotateY(225deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(28) {
  height: 66px;
  -webkit-animation: boost28 1959ms linear infinite;
          animation: boost28 1959ms linear infinite;
}
@-webkit-keyframes boost28 {
  0% {
    -webkit-transform: translateZ(-27px) translateY(-46px) translateX(11px) rotateY(79deg);
            transform: translateZ(-27px) translateY(-46px) translateX(11px) rotateY(79deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-9px) translateY(-300px) translateX(21px) rotateY(79deg);
            transform: translateZ(-9px) translateY(-300px) translateX(21px) rotateY(79deg);
    opacity: 0;
  }
}
@keyframes boost28 {
  0% {
    -webkit-transform: translateZ(-27px) translateY(-46px) translateX(11px) rotateY(79deg);
            transform: translateZ(-27px) translateY(-46px) translateX(11px) rotateY(79deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-9px) translateY(-300px) translateX(21px) rotateY(79deg);
            transform: translateZ(-9px) translateY(-300px) translateX(21px) rotateY(79deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(29) {
  height: 65px;
  -webkit-animation: boost29 775ms linear infinite;
          animation: boost29 775ms linear infinite;
}
@-webkit-keyframes boost29 {
  0% {
    -webkit-transform: translateZ(-29px) translateY(-41px) translateX(6px) rotateY(277deg);
            transform: translateZ(-29px) translateY(-41px) translateX(6px) rotateY(277deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(6px) rotateY(277deg);
            transform: translateZ(-5px) translateY(-300px) translateX(6px) rotateY(277deg);
    opacity: 0;
  }
}
@keyframes boost29 {
  0% {
    -webkit-transform: translateZ(-29px) translateY(-41px) translateX(6px) rotateY(277deg);
            transform: translateZ(-29px) translateY(-41px) translateX(6px) rotateY(277deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(6px) rotateY(277deg);
            transform: translateZ(-5px) translateY(-300px) translateX(6px) rotateY(277deg);
    opacity: 0;
  }
}
#awing .boost:nth-child(30) {
  height: 51px;
  -webkit-animation: boost30 1349ms linear infinite;
          animation: boost30 1349ms linear infinite;
}
@-webkit-keyframes boost30 {
  0% {
    -webkit-transform: translateZ(-14px) translateY(-44px) translateX(11px) rotateY(270deg);
            transform: translateZ(-14px) translateY(-44px) translateX(11px) rotateY(270deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(-33px) rotateY(270deg);
            transform: translateZ(-5px) translateY(-300px) translateX(-33px) rotateY(270deg);
    opacity: 0;
  }
}
@keyframes boost30 {
  0% {
    -webkit-transform: translateZ(-14px) translateY(-44px) translateX(11px) rotateY(270deg);
            transform: translateZ(-14px) translateY(-44px) translateX(11px) rotateY(270deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(-5px) translateY(-300px) translateX(-33px) rotateY(270deg);
            transform: translateZ(-5px) translateY(-300px) translateX(-33px) rotateY(270deg);
    opacity: 0;
  }
}
@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes barrelRoll {
  0% {
    -webkit-transform: rotateY(0deg) rotateX(-15deg);
            transform: rotateY(0deg) rotateX(-15deg);
  }
  50% {
    -webkit-transform: rotateY(375deg) rotateX(-15deg);
            transform: rotateY(375deg) rotateX(-15deg);
  }
  70% {
    -webkit-transform: rotateY(355deg) rotateX(-15deg);
            transform: rotateY(355deg) rotateX(-15deg);
  }
  80% {
    -webkit-transform: rotateY(360deg) rotateX(-15deg);
            transform: rotateY(360deg) rotateX(-15deg);
  }
  100% {
    -webkit-transform: rotateY(360deg) rotateX(-15deg);
            transform: rotateY(360deg) rotateX(-15deg);
  }
}
@keyframes barrelRoll {
  0% {
    -webkit-transform: rotateY(0deg) rotateX(-15deg);
            transform: rotateY(0deg) rotateX(-15deg);
  }
  50% {
    -webkit-transform: rotateY(375deg) rotateX(-15deg);
            transform: rotateY(375deg) rotateX(-15deg);
  }
  70% {
    -webkit-transform: rotateY(355deg) rotateX(-15deg);
            transform: rotateY(355deg) rotateX(-15deg);
  }
  80% {
    -webkit-transform: rotateY(360deg) rotateX(-15deg);
            transform: rotateY(360deg) rotateX(-15deg);
  }
  100% {
    -webkit-transform: rotateY(360deg) rotateX(-15deg);
            transform: rotateY(360deg) rotateX(-15deg);
  }
}
@-webkit-keyframes cameraRotate {
  0% {
    -webkit-transform: scale(1.5) rotateX(70deg) rotateZ(20deg);
            transform: scale(1.5) rotateX(70deg) rotateZ(20deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotateX(70deg) rotateZ(340deg);
            transform: scale(1.5) rotateX(70deg) rotateZ(340deg);
  }
}
@keyframes cameraRotate {
  0% {
    -webkit-transform: scale(1.5) rotateX(70deg) rotateZ(20deg);
            transform: scale(1.5) rotateX(70deg) rotateZ(20deg);
  }
  100% {
    -webkit-transform: scale(1.5) rotateX(70deg) rotateZ(340deg);
            transform: scale(1.5) rotateX(70deg) rotateZ(340deg);
  }
}
@-webkit-keyframes slide {
  0% {
    left: 110%;
  }
  100% {
    left: -10%;
  }
}
@keyframes slide {
  0% {
    left: 110%;
  }
  100% {
    left: -10%;
  }
}
@-webkit-keyframes flyX {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  25% {
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes flyX {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  25% {
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes flyY {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  25% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  75% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes flyY {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  25% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  75% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes flyZ {
  0% {
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
  }
  25% {
    -webkit-transform: translateZ(150px);
            transform: translateZ(150px);
  }
  50% {
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
  }
  75% {
    -webkit-transform: translateZ(-150px);
            transform: translateZ(-150px);
  }
  100% {
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
  }
}
@keyframes flyZ {
  0% {
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
  }
  25% {
    -webkit-transform: translateZ(150px);
            transform: translateZ(150px);
  }
  50% {
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
  }
  75% {
    -webkit-transform: translateZ(-150px);
            transform: translateZ(-150px);
  }
  100% {
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
  }
}

Ссылки

https://codepen.io/YusukeNakaya/pen/XZYZMV

Летящий космический корабль на чистом CSS

HTML

CSS

Комментарии

Похожие статьи