CSS Animated Fireball

Recreation of SMB NES animated fireball GIF

HTML

<img src="http://dev.bowdenweb.com/nes/super-mario-brothers/i/fireball/an_fireball.gif" style="display:block; margin:20px auto 0 auto;" />
<h2>Animated GIF</h2>
      <div style="position:relative; margin:10px auto; width:8px; height:8px; outline:1px solid #000;">
        <div class="firebally animateme">
  <b class="fb01 animate"></b><b class="fb02 animate"></b><b class="fb03 animate"></b><b class="fb04 animate"></b><b class="fb05 animate"></b><b class="fb06 animate"></b><b class="fb07 animate"></b><b class="fb08 animate"></b><b class="fb09 animate"></b><b class="fb10 animate"></b><b class="fb11 animate"></b><b class="fb12 animate"></b><b class="fb13 animate"></b><b class="fb14 animate"></b><b class="fb15 animate"></b>

  <u class="fbz01 animate"></u><u class="fbz02 animate"></u><u class="fbz03 animate"></u><u class="fbz04 animate"></u><u class="fbz05 animate"></u><u class="fbz06 animate"></u>
  
  <i class="fbx01 animate"></i><i class="fbx02 animate"></i>
        </div>
</div><h2>Animated CSS</h2>

CSS

h2{text-align:center}
.firebally{width:20px; height:20px}
.animateme{position: relative; margin:0}
.animateme b,.animateme u,.animateme i{position: absolute; }
.animateme b{background-color:#d82800}
.animateme u{background-color:#fc9838}
.animateme i{background-color:#fcfcfc}


.animate{-webkit-animation-duration:.1s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count:infinite;     -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards;}
.fb01{width:12.5%; height:12.5%; bottom:87.5%; right:25%; -webkit-animation-name:fb01;}
@-webkit-keyframes fb01 {
0% {bottom:87.5%; right:25%;}
33% {bottom:0; right:12.5%;}
66% {bottom:0; right:62.5%;}
100% {bottom:87.5%; right:75%;}
}

.fb02{width:12.5%; height:12.5%; bottom:75%; right:0; -webkit-animation-name:fb02}
@-webkit-keyframes fb02 {
0% {bottom:75%; right:0}
33% {bottom:25%; right:0;}
66% {bottom:12.5%; right:87.5%}
100% {bottom:63.5%; right:87.5%}
}

.fb03{width:12.5%; height:12.5%; bottom:62.5%; right:12.5%; -webkit-animation-name:fb03}
@-webkit-keyframes fb03 {
0% {bottom:62.5%; right:12.5%}
33% {bottom:12.5%; right:25%}
66% {bottom:25%; right:75%}
100% {bottom:75%; right:62.5%}
}


.fb04{width:12.5%; bottom:25%; height:50%; right:87.5%; -webkit-animation-name:fb04}
@-webkit-keyframes fb04 {
0% {height:50%; right:87.5%;}
33% {height:37.5%; right:87.5%}
66% {height:37.5%; right:0}
100% {height:37.5%; right:0}
}

.fb05{width:37.5%; height:12.5%; bottom:75%; right:50%; -webkit-animation-name:fb05}
@-webkit-keyframes fb05 {
0% {bottom:75%; right:50%}
33% {bottom:0; right:37.5%;}
66% {bottom:12.5%; right:12.5%;}
100% {bottom:87.5%; right:25%;}
}

.fb06{height:12.5%; bottom:62.5%; width:12.5%; right:75%; -webkit-animation-name:fb06}
@-webkit-keyframes fb06 {
0% {width:12.5%; right:75%}
33% {width:25%; right:75%;}
66% {width:25%; right:0}
100% {width:25%; right:0}
}


.fb07{height:12.5%; bottom:62.5%; width:25%;...