CSS Animated Fireball

Recreation of SMB NES animated fireball GIF

HTML

<h2>Animated GIF</h2>
<img src="http://dev.bowdenweb.com/nes/super-mario-brothers/i/fireball/an_fireball.gif" alt="">

<h2>Animated CSS</h2>
<div class="wrapper">
    <div class="firebally">
        <b class="fb01"></b>
        <b class="fb02"></b>
        <b class="fb03"></b>
        <b class="fb04"></b>
        <b class="fb05"></b>
        <b class="fb06"></b>
        <b class="fb07"></b>
        <b class="fb08"></b>
        <b class="fb09"></b>
        <b class="fb10"></b>
        <b class="fb11"></b>
        <b class="fb12"></b>
        <b class="fb13"></b>
        <b class="fb14"></b>
        <b class="fb15te"></b>

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

CSS

h2{
    text-align:center;
}
img {
    display: block;
    margin: 10px auto;
}
.wrapper {
    position: relative;
    margin: 10px auto;
    width: 8px;
    height: 8px;
}
.firebally{
    width:80px; 
    height:80px;
    position: relative; 
    margin:0;
    -webkit-animation: spin .12s steps(4,end) infinite;
}
.firebally b,
.firebally u,
.firebally i{
    position: absolute; 
}
.firebally b{
    background-color:#d82800;
}
.firebally u{
    background-color:#fc9838;
}
.firebally i{
    background-color:#fcfcfc;
}

.fb01{width:12.5%; height:12.5%; bottom:87.5%; right:25%;}

.fb02{width:12.5%; height:12.5%; bottom:75%; right:0;}

.fb03{width:12.5%; height:12.5%; bottom:62.5%; right:12.5%;}

.fb04{width:12.5%; bottom:25%; height:50%; right:87.5%;}

.fb05{width:37.5%; height:12.5%; bottom:75%; right:50%;}

.fb06{height:12.5%; bottom:62.5%; width:12.5%; right:75%;}

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

.fb08{height:12.5%; right:12.5%; bottom:12.5%; width:25%;}

.fb09{width:12.5%; height:25%; bottom:37.5%; right:0;}

.fb10{height:25%; bottom:37.5%; width:12.5%; right:37.5%;}

/** .fb10d aka fb10 at 100% is bigger to compensate for one block missing **/

.fb11{height:25%; width:12.5%; bottom:12.5%; right:75%;}

.fb12{height:12.5%; bottom:12.5%; width:12.5%; right:62.5%;}

.fb13{height:12.5%; bottom:37.5%; width:25%; right:12.5%;}

.fb14{height:12.5%; bottom:25%; width:12.5%; right:12.5%;}

.fb15{height:12.5%; width:50%; right:25%; bottom:0;}

.fbz01{width:12.5%; height:12.5%; right:62.5%; bottom:25%;}

.fbz02{width:25%; height:12.5%; right:37.5%; bottom:12.5%;}

.fbz03{width:12.5%; height:25%; right:62.5%; bottom:50%;}

.fbz04{width:12.5%; height:25%; bottom:37.5%; right:75%;}

.fbz05{width:12.5%; height:25%; right:50%; bottom:37.5%;}

.fbz06{width:25%; height:12.5%; right:25%; bottom:25%;}

.fbx01{width:12.5%; height:12.5%; right:62.5%; bottom:37.5%;}

.fbx02{width:12.5%; height:12.5%; right:50%; bottom:25%;}

@-webkit-keyframes spin {
   ...