Animated rocket in svg & css3

by Dovy Paukstys

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="pageWrap">
<svg version="1.1" x="0px" y="0px" width="307px" height="283px" id="rocket">

<g class="rocket_wrap">



<g class="rocket_inner">

<path class="fire fire_path"  id="fireMiddle" d="M148.891,179.906c3.928,0,7.111,3.176,7.111,7.094 c0,7.78-7.111,16-7.111,16s-7.111-8.349-7.111-16C141.78,183.082,144.963,179.906,148.891,179.906z"/>

<path class="fire_path fire" id="fireRight" d="M154.063,181.092c3.577-1.624,7.788-0.048,9.408,3.52 c3.216,7.084,0.139,17.508,0.139,17.508s-9.927-4.662-13.09-11.63C148.9,186.923,150.487,182.715,154.063,181.092z"/>


<path class="fire_path fire" id="fireLeft" d="M143.392,182.519c3.25,2.207,4.098,6.623,1.896,9.864 c-4.372,6.436-14.873,9.238-14.873,9.238s-1.191-10.902,3.108-17.23C135.725,181.149,140.143,180.312,143.392,182.519z"/>



<path class="fire_path fire" id="fireSmallLeft" d="M143.193 187.531c2.226 0.4 3.7 2.6 3.2 4.8 c-0.875 4.407-5.829 8.264-5.829 8.264s-3.09-5.53-2.229-9.865C138.807 188.5 141 187.1 143.2 187.531z"/>



<path class="fire_path fire" id="fireSmallRight" d="M152.089 188.599c2.043-0.985 4.496-0.132 5.5 1.9 c1.952 4 0.3 10.1 0.3 10.107s-5.795-2.56-7.713-6.541C149.186 192 150 189.6 152.1 188.599z"/>


<path class="rocket_bottom" d="M157.069 171.31h-3.292c-1.562-0.048-3.178-0.076-4.846-0.076 s-3.284 0.028-4.846 0.076h-3.292c-7.277-7.938-12.371-26.182-12.371-47.434c0-28.54 9.182-51.676 20.508-51.676 c11.327 0 20.5 23.1 20.5 51.676C169.44 145.1 164.3 163.4 157.1 171.31z"/>

<g id="right_wing_wrap">
<path class="wing_base" d="M166.678 127.161c0 0 17.7 3.3 12.9 48.099l-18.06-14.05 L166.678 127.161z"/>
<path class="wing_shadow" d="M158.225 140.336c10.481-5.584 22.7 22.2 21.4 34.9 l-18.06-14.05C161.542 161.2 156.1 144.3 158.2 140.336z"/>
</g>

<g id="left_wing_wrap">
<path class="wing_base" d="M135.131 161.21l-18.06 14.1 c-4.805-44.793 12.924-48.099 12.924-48.099L135.131 161.21z"/>
<path class="wing_shadow" d="M135.131...

CSS

/*=============================================
[ Page Setup ]
==============================================*/
body{background: #333;}
#pageWrap {width:100%;overflow:hidden;}
#rocket{display:block;margin:0 auto;
-ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
    transform: rotate(20deg);}

/*=============================================
[ Inactive State Styles ]
==============================================*/

.rocket_inner {
    transform: translateY(15px) translateX(-3px);
    -webkit-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
}

.large_window_path {
    transition: .2s;
    fill: #22303e;
}
.small_window_path {
    fill: #22303e;
}
.wing_shadow {
    fill: #34495e;
}
.rocket_bottom { fill: #34495e }
.rocket_base { fill: #34495e }
.rocket_shadow { fill: #34495e }
.window_grandient { stop-color: #2DCB73 }
.window_grandient1 { stop-color: #2AC16D }
.window_grandient2 { stop-color: #29B968 }
.window_grandient3 { stop-color: #28B767 }
.wing_base { fill: #34495e }
.fire_path { fill: #FC0 }

/*=============================================
[ Hover Styles ]
==============================================*/
.rocket_wrap .rocket_base {
    fill: #FFFFFF !important;
    stroke-width: 0px !important;
}
.rocket_wrap .rocket_shadow {
    fill: #EDEDED !important;
    stroke-width: 0px !important;
}
.rocket_wrap .small_window_path {
    fill: #28B767 !important;
    stroke-width: 0px !important;
}
.rocket_wrap .wing_shadow {
    display: block !important;
    fill: #FC9252 !important;
}
.rocket_wrap .wing_base {
    fill: #E16E36 !important;
    stroke-width: 0px !important;
}
.rocket_wrap .rocket_bottom {
    fill: #2DCB73 !important;
    stroke-width: 0px !important;
}
.rocket_wrap .large_window_path {
    fill: url(#SVGID_2_) !important;
    stroke-width: 0px !important;
}
.rocket_wrap .rocket_inner { transform: translateY(0px) translateX(-3px) !important;...