.rocket {
     position: absolute;
     left: 80%;
     bottom: -20px;
     width: 262px;
     height: 260px;
     margin-left: -130.5px;
     background-size: 100%;
     z-index: 999;
     transition: all linear, background linear;
 }
 body.l-state2 .rocket {
     transition-duration : 1.5s, 0.7s;
     bottom: 80%;
     background-size: 100%;
}
 body.l-state3 .rocket {
     transition-duration : 1s;
     bottom: 85%;
     width: 202px;
     height: 200px;
}
 body.l-state4 .rocket,
 body.l-state5 .rocket,
 body.l-state6 .rocket {
     transition-duration : 0.4s;

     width: 102px;
     height: 100px;
}
body.l-state4 .rocket {
    bottom: 90%;
}

body.l-state5 .rocket {
    bottom: 110%;
}
body.l-state6 .rocket {
    bottom: 90%;
    left: 80%;
}

 body.l-state2 .rocket,
 body.l-state3 .rocket,
 body.l-state4 .rocket,
 body.l-state5 .rocket {
     left: 75%;
     background-size: 100%;
     -moz-transform: scale(0.5) rotate(-20deg) translate(50px);
     -webkit-transform: scale(0.5) rotate(-20deg) translate(50px);
     -o-transform: scale(0.5) rotate(-20deg) translate(50px);
     transform: scale(0.5) rotate(-20deg) translate(50px);
}
 @keyframes xAxis {
     50% {
         animation-timing-function: ease-in;
         transform: translateX(-150px);
    }
}