Flying Rocket by

Erwin Goossen

On: 12 Aug 2016

Personal site: http://codepen.io/navelpluisje

fullscreen 
<div class="space">
  <div class="moon">
    <div class="explosion"></div>
  </div>
  
  <ul class="stars">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  
  <div class="mountain m1"></div>
  <div class="mountain m7"></div>
  <div class="mountain m2"></div>
  <div class="mountain m4"></div>
  <div class="mountain m3"></div>
  <div class="mountain m3"></div>
  <div class="mountain m5"></div>
  
  <ul class="forest">
    <li class="tree"></li>
    <li class="tree"></li>
    <li class="tree"></li>
    <li class="tree"></li>
  </ul>
  
  <div class="tower">
    <div class="arm">
    </div>
  </div>
  
  <div class="rocket">
    <div class="tail"></div>
    <ul class="flames">
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

body {
  -webkit-animation: blur 8s infinite linear;
          animation: blur 8s infinite linear;
  background: #453454;
}

.space {
  background: -webkit-linear-gradient(top, #1e1725 0, #523e64);
  background: linear-gradient(to bottom, #1e1725 0, #523e64);
  height: 100vh;
  position: absolute;
  overflow: hidden;
  top: 0;
  width: 100vw;
}

/* The Rocket-body */
.rocket {
  -webkit-animation: flight 8s infinite;
          animation: flight 8s infinite;
  background-color: red;
  /* background-image is used for the striping, nose tip and shadow effect */
  background-image: -webkit-linear-gradient(0deg, rgba(33, 33, 33, 0.1) 50%, transparent 50%), -webkit-radial-gradient(circle, #808080 30%, #ffffff 32%, #ffffff 80%, #ff0000 82%, #ffffff 84%, #ff0000 86%);
  background-image: linear-gradient(90deg, rgba(33, 33, 33, 0.1) 50%, transparent 50%), radial-gradient(circle, #808080 30%, #ffffff 32%, #ffffff 80%, #ff0000 82%, #ffffff 84%, #ff0000 86%);
  background-repeat: no-repeat;
  background-position: 0 0, 0 -110px;
  backgrund-size: 200%;
  border-radius: 50% 50% 20% 20%/ 40% 40% 60% 60%;
  bottom: 40px;
  height: 200px;
  left: 150px;
  position: absolute;
  width: 80px;
}

/* The default tail is th emiddle, small one */
.tail {
  background: gray;
  top: 200px;
  height: 35px;
  left: 37px;
  position: relative;
  width: 6px;
  /* Here the 2 side tails are created */
  /* The second one is a 180 deg flipped version */
}
.tail::before, .tail::after {
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: 0px -0px;
  border-radius: 100% 20% 0 10% / 60% 100% 0 40%;
  content: '';
  display: block;
  height: 80px;
  position: absolute;
  top: -40px;
  width: 35px;
}
.tail::before {
  /* Used the transparency in the radial gradient to create the 'inner-circle' */
  /* The outer is done with border-radius */
  background-image: -webkit-radial-gradient(ellipse, rgba(0, 0, 0, 0) 40%, #808080 42%);
  background-image: radial-gradient(ellipse, rgba(0, 0, 0, 0) 40%, #808080 42%);
  box-shadow: -2px -2px 0 0 #676767;
  left: -55px;
}
.tail::after {
  background-image: -webkit-radial-gradient(ellipse, rgba(0, 0, 0, 0) 40%, #737373 42%);
  background-image: radial-gradient(ellipse, rgba(0, 0, 0, 0) 40%, #737373 42%);
  box-shadow: -2px -2px 0 0 #8d8d8d;
  right: -55px;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

/* Flame container used for positioning and scaling the flames */
.flames {
  -webkit-animation: flames 8s infinite;
          animation: flames 8s infinite;
  list-style: none;
  margin: 0;
  opacity: .3;
  position: relative;
  top: 165px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}
.flames li {
  -webkit-animation: fire .4s infinite ease-in-out;
          animation: fire .4s infinite ease-in-out;
  background: yellow;
  border-radius: 50% 50% 60% 60%/ 18px 18px 100% 100%;
  bottom: -63px;
  box-shadow: 0 15px 20px -2px yellow;
  height: 60px;
  left: 22px;
  opacity: .7;
  position: absolute;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  width: 36px;
}
.flames li:nth-of-type(2) {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  background: orangered;
  bottom: -46px;
  box-shadow: 0 15px 20px -2px orangered;
  height: 40px;
  left: 30px;
  width: 20px;
}

/* The tower and arm*/
/* Cross lines are created with linear repeated gradients */
.tower,
.arm {
  border-color: gray;
  border-style: solid;
  position: absolute;
}

.tower {
  -webkit-animation: tower 8s infinite ease-in-out;
          animation: tower 8s infinite ease-in-out;
  background-image: -webkit-linear-gradient(135deg, transparent 29px, gray 31px, #8d8d8d 31px, #8d8d8d 33px, transparent 33px), -webkit-linear-gradient(45deg, transparent 29px, gray 29px, gray 31px, #737373 31px, #737373 33px, transparent 33px);
  background-image: linear-gradient(-45deg, transparent 29px, gray 31px, #8d8d8d 31px, #8d8d8d 33px, transparent 33px), linear-gradient(45deg, transparent 29px, gray 29px, gray 31px, #737373 31px, #737373 33px, transparent 33px);
  background-size: 44px 44px;
  border-width: 5px 5px 0;
  bottom: 0;
  height: 300px;
  left: 56px;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  width: 44px;
}

.arm {
  -webkit-animation: arm 8s infinite ease-in-out;
          animation: arm 8s infinite ease-in-out;
  background-image: -webkit-linear-gradient(135deg, transparent 16px, gray 16px, gray 18px, transparent 18px), -webkit-linear-gradient(45deg, transparent 16px, gray 16px, gray 18px, transparent 18px);
  background-image: linear-gradient(-45deg, transparent 16px, gray 16px, gray 18px, transparent 18px), linear-gradient(45deg, transparent 16px, gray 16px, gray 18px, transparent 18px);
  background-size: 24px 24px;
  border-width: 5px;
  height: 24px;
  left: 44px;
  top: 90px;
  width: 60px;
}

.moon {
  background-color: #aba7a1;
  background-image: -webkit-radial-gradient(circle, #9f9a94 50%, rgba(0, 0, 0, 0) 51%), -webkit-radial-gradient(circle, #98938b 50%, rgba(0, 0, 0, 0) 54%);
  background-image: radial-gradient(circle, #9f9a94 50%, rgba(0, 0, 0, 0) 51%), radial-gradient(circle, #98938b 50%, rgba(0, 0, 0, 0) 54%);
  background-repeat: no-repeat;
  background-size: 28vmin 28vmin, 10vmin 10vmin;
  background-position: 150% 140%, 20%, 80%;
  border-radius: 50%;
  box-shadow: 0 0 20px 0 #c3c0bc;
  height: 40vmin;
  right: -5vh;
  position: absolute;
  top: -10vw;
  width: 40vmin;
}

.stars {
  list-style: none;
  margin: 0;
}
.stars li {
  -webkit-animation: stars 14s infinite;
          animation: stars 14s infinite;
  background: #dfe8f8;
  border-radius: 50%;
  height: 3px;
  position: absolute;
  width: 3px;
}
.stars li:nth-of-type(1) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  top: 5vw;
  left: 30vw;
}
.stars li:nth-of-type(2) {
  -webkit-animation-delay: 13s;
          animation-delay: 13s;
  top: 15vw;
  left: 10vw;
}
.stars li:nth-of-type(3) {
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
  top: 20vw;
  left: 12vw;
}
.stars li:nth-of-type(4) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  top: 27vw;
  left: 75vw;
}
.stars li:nth-of-type(5) {
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
  top: 12vw;
  left: 60vw;
}
.stars li:nth-of-type(6) {
  -webkit-animation-delay: 7.5s;
          animation-delay: 7.5s;
  top: 17vw;
  left: 40vw;
}
.stars li:nth-of-type(7) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  top: 35vw;
  left: 85vw;
}
.stars li:nth-of-type(8) {
  -webkit-animation-delay: 9s;
          animation-delay: 9s;
  top: 22vw;
  left: 67vw;
}

.explosion {
  -webkit-animation: explosion 8s infinite ease-in-out;
          animation: explosion 8s infinite ease-in-out;
  background: orange;
  border-radius: 50%;
  box-shadow: none;
  top: 25%;
  height: 10px;
  width: 10px;
  right: 25%;
  position: absolute;
}

.mountain {
  background-image: -webkit-radial-gradient(circle, #d3d3d3 50%, rgba(0, 0, 0, 0) 51%), -webkit-radial-gradient(ellipse, #d3d3d3 50%, rgba(0, 0, 0, 0) 51%), -webkit-radial-gradient(ellipse, #d3d3d3 50%, rgba(0, 0, 0, 0) 51%);
  background-image: radial-gradient(circle, #d3d3d3 50%, rgba(0, 0, 0, 0) 51%), radial-gradient(ellipse, #d3d3d3 50%, rgba(0, 0, 0, 0) 51%), radial-gradient(ellipse, #d3d3d3 50%, rgba(0, 0, 0, 0) 51%);
  background-size: 60% 80%, 50% 70%, 50% 70%;
  background-repeat: no-repeat;
  bottom: 0;
  position: absolute;
}
.mountain.m1 {
  background-color: #50421f;
  background-position: -80% -120%, 0% -150%, -4vmax -4vmax;
  bottom: -10vh;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  height: 70vmin;
  left: -15vw;
  -webkit-transform: rotate(60deg) skewX(20deg);
          transform: rotate(60deg) skewX(20deg);
  width: 40vmin;
}
.mountain.m7 {
  background-color: #5b4614;
  background-position: 40vmax 40vmax, -25% -130%, 40vmax 40vmax;
  bottom: -20vh;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  height: 70vmin;
  left: 12vw;
  -webkit-transform: rotate(60deg) skewX(20deg);
          transform: rotate(60deg) skewX(20deg);
  width: 40vmin;
}
.mountain.m3 {
  background-color: #554b34;
  background-image: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  -webkit-filter: blur(2px);
          filter: blur(2px);
  height: 35vmin;
  left: 15vw;
  width: 50vmin;
}
.mountain.m3 + .m3 {
  left: -5vw;
}
.mountain.m4 {
  background-color: #252117;
  background-position: center -120%, left -100%, right -80%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  -webkit-filter: blur(2px);
          filter: blur(2px);
  height: 60vmin;
  left: 35vw;
  width: 35vmin;
}
.mountain.m5 {
  background-color: #453d2a;
  background-position: center -120%, left -100%, right -80%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  height: 50vmin;
  left: 7vw;
  width: 40vmin;
}

/* Create the different trees */
.tree {
  border-color: transparent transparent darkgreen transparent;
  border-style: solid;
  /* Border radius for a rounder bottom */
  border-radius: 15%;
  box-sizing: border-box;
  display: block;
  position: absolute;
  /* The log */
  /* The individual trees */
}
.tree::after {
  background: #704e35;
  content: '';
  display: block;
  position: absolute;
  height: 70px;
  left: -8px;
  width: 16px;
}
.tree:nth-of-type(1) {
  bottom: 30px;
  border-color: transparent transparent #003100 transparent;
  border-width: 0 50px 320px 50px;
  -webkit-filter: blur(2px);
          filter: blur(2px);
  right: 10vw;
}
.tree:nth-of-type(1)::after {
  bottom: -390px;
}
.tree:nth-of-type(2) {
  bottom: 40px;
  border-color: transparent transparent #004b00 transparent;
  border-width: 0 50px 250px 50px;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  right: 18vw;
}
.tree:nth-of-type(2)::after {
  bottom: -320px;
}
.tree:nth-of-type(3) {
  bottom: 35px;
  border-width: 0 60px 350px 60px;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  right: 4vw;
}
.tree:nth-of-type(3)::after {
  bottom: -420px;
}
.tree:nth-of-type(4) {
  bottom: 70px;
  border-color: darkgreen;
  border-width: 60px;
  border-radius: 50% / 60% 60% 40% 40%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  right: 24vw;
}
.tree:nth-of-type(4)::after {
  bottom: -130px;
}

/* From here onlu animations */
@-webkit-keyframes fire {
  0% {
    opacity: .6;
    -webkit-transform: scale(0.96) rotate(-3deg);
            transform: scale(0.96) rotate(-3deg);
  }
  10% {
    opacity: .8;
    -webkit-transform: scale(1.01) rotate(-2deg);
            transform: scale(1.01) rotate(-2deg);
  }
  20% {
    opacity: .5;
    -webkit-transform: scale(0.96) rotate(-1deg);
            transform: scale(0.96) rotate(-1deg);
  }
  30% {
    opacity: .7;
    -webkit-transform: scale(1.01) rotate(0);
            transform: scale(1.01) rotate(0);
  }
  40% {
    opacity: .6;
    -webkit-transform: scale(0.96) rotate(1deg);
            transform: scale(0.96) rotate(1deg);
  }
  50% {
    opacity: .8;
    -webkit-transform: scale(1.01) rotate(2deg);
            transform: scale(1.01) rotate(2deg);
  }
  60% {
    opacity: .5;
    -webkit-transform: scale(0.96) rotate(1deg);
            transform: scale(0.96) rotate(1deg);
  }
  70% {
    opacity: .7;
    -webkit-transform: scale(1.01) rotate(0);
            transform: scale(1.01) rotate(0);
  }
  80% {
    opacity: .45;
    -webkit-transform: scale(0.96) rotate(-1deg);
            transform: scale(0.96) rotate(-1deg);
  }
  90% {
    opacity: .6;
    -webkit-transform: scale(1.01) rotate(-2deg);
            transform: scale(1.01) rotate(-2deg);
  }
}
@keyframes fire {
  0% {
    opacity: .6;
    -webkit-transform: scale(0.96) rotate(-3deg);
            transform: scale(0.96) rotate(-3deg);
  }
  10% {
    opacity: .8;
    -webkit-transform: scale(1.01) rotate(-2deg);
            transform: scale(1.01) rotate(-2deg);
  }
  20% {
    opacity: .5;
    -webkit-transform: scale(0.96) rotate(-1deg);
            transform: scale(0.96) rotate(-1deg);
  }
  30% {
    opacity: .7;
    -webkit-transform: scale(1.01) rotate(0);
            transform: scale(1.01) rotate(0);
  }
  40% {
    opacity: .6;
    -webkit-transform: scale(0.96) rotate(1deg);
            transform: scale(0.96) rotate(1deg);
  }
  50% {
    opacity: .8;
    -webkit-transform: scale(1.01) rotate(2deg);
            transform: scale(1.01) rotate(2deg);
  }
  60% {
    opacity: .5;
    -webkit-transform: scale(0.96) rotate(1deg);
            transform: scale(0.96) rotate(1deg);
  }
  70% {
    opacity: .7;
    -webkit-transform: scale(1.01) rotate(0);
            transform: scale(1.01) rotate(0);
  }
  80% {
    opacity: .45;
    -webkit-transform: scale(0.96) rotate(-1deg);
            transform: scale(0.96) rotate(-1deg);
  }
  90% {
    opacity: .6;
    -webkit-transform: scale(1.01) rotate(-2deg);
            transform: scale(1.01) rotate(-2deg);
  }
}
@-webkit-keyframes flames {
  0% {
    opacity: .3;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  7% {
    opacity: .3;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  10% {
    opacity: .7;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  40% {
    opacity: .9;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  50% {
    opacity: .9;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes flames {
  0% {
    opacity: .3;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  7% {
    opacity: .3;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  10% {
    opacity: .7;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  40% {
    opacity: .9;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  50% {
    opacity: .9;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes arm {
  10% {
    width: 60px;
  }
  20% {
    width: 0;
  }
  100% {
    width: 0;
  }
}
@keyframes arm {
  10% {
    width: 60px;
  }
  20% {
    width: 0;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes tower {
  47% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  60% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  62% {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
  63% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  64% {
    -webkit-transform: rotate(-87deg) translateY(0px);
            transform: rotate(-87deg) translateY(0px);
    opacity: 1;
  }
  80% {
    -webkit-transform: rotate(-90deg) translateY(-100px);
            transform: rotate(-90deg) translateY(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(-90deg) translateY(-100px);
            transform: rotate(-90deg) translateY(-100px);
  }
}
@keyframes tower {
  47% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  60% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  62% {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
  63% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  64% {
    -webkit-transform: rotate(-87deg) translateY(0px);
            transform: rotate(-87deg) translateY(0px);
    opacity: 1;
  }
  80% {
    -webkit-transform: rotate(-90deg) translateY(-100px);
            transform: rotate(-90deg) translateY(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(-90deg) translateY(-100px);
            transform: rotate(-90deg) translateY(-100px);
  }
}
@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(30px);
            filter: blur(30px);
  }
  4% {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  96% {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  100% {
    -webkit-filter: blur(30px);
            filter: blur(30px);
  }
}
@keyframes blur {
  0% {
    -webkit-filter: blur(30px);
            filter: blur(30px);
  }
  4% {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  96% {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  100% {
    -webkit-filter: blur(30px);
            filter: blur(30px);
  }
}
@-webkit-keyframes flight {
  15% {
    bottom: 40px;
    left: 150px;
  }
  45% {
    bottom: 90px;
    left: 150px;
    -webkit-transform: rotateZ(0) rotateX(0) scale(1);
            transform: rotateZ(0) rotateX(0) scale(1);
  }
  65% {
    bottom: 90px;
    -webkit-filter: blur(0);
            filter: blur(0);
    left: 155px;
    -webkit-transform: rotateZ(45deg) rotateX(0) scale(1);
            transform: rotateZ(45deg) rotateX(0) scale(1);
  }
  100% {
    bottom: 95%;
    -webkit-filter: blur(5px);
            filter: blur(5px);
    left: 98%;
    -webkit-transform: rotateZ(90deg) rotateX(35deg) scale(0);
            transform: rotateZ(90deg) rotateX(35deg) scale(0);
  }
}
@keyframes flight {
  15% {
    bottom: 40px;
    left: 150px;
  }
  45% {
    bottom: 90px;
    left: 150px;
    -webkit-transform: rotateZ(0) rotateX(0) scale(1);
            transform: rotateZ(0) rotateX(0) scale(1);
  }
  65% {
    bottom: 90px;
    -webkit-filter: blur(0);
            filter: blur(0);
    left: 155px;
    -webkit-transform: rotateZ(45deg) rotateX(0) scale(1);
            transform: rotateZ(45deg) rotateX(0) scale(1);
  }
  100% {
    bottom: 95%;
    -webkit-filter: blur(5px);
            filter: blur(5px);
    left: 98%;
    -webkit-transform: rotateZ(90deg) rotateX(35deg) scale(0);
            transform: rotateZ(90deg) rotateX(35deg) scale(0);
  }
}
@-webkit-keyframes stars {
  0%, 6% {
    box-shadow: none;
  }
  3% {
    box-shadow: 0 0 10px 3px white;
  }
}
@keyframes stars {
  0%, 6% {
    box-shadow: none;
  }
  3% {
    box-shadow: 0 0 10px 3px white;
  }
}
@-webkit-keyframes explosion {
  92%, 100% {
    box-shadow: 0 0 0 0 orange;
  }
  97% {
    box-shadow: 0 0 20vmin 20vmin orangered;
  }
}
@keyframes explosion {
  92%, 100% {
    box-shadow: 0 0 0 0 orange;
  }
  97% {
    box-shadow: 0 0 20vmin 20vmin orangered;
  }
}

15