JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<script src="https://rawgit.com/jQueryKeyframes/Keyframes.Spritesheet/master/keyframes.spritesheet.min.js"></script>
<div class="flux flux0"></div>
<div class="flux flux1"></div>
<div class="flux flux2"></div>
<div class="flux x2 flux3"></div>
<div class="flux x2 flux4"></div>
<h1>Source Image</h1>
<img src="http://opengameart.org/sites/default/files/special_effects_prev.png" alt="" />

CSS

.flux{
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(http://opengameart.org/sites/default/files/special_effects_prev.png);
}
.x2{
    width: 64px;
    height: 64px;
}

JavaScript

var offsetX = 0;
for(var i = 0; i < 5; i++){
    var width = 32;
    var height = 32;
    if(i > 2){
        width = width * 2;
        height = height * 2;
    }
    var rows = 10;
    if(i == 4){
        rows = 11;
    }
    $('.flux'+i).playSpriteSheet('gem'+i, '1s', -1, $.keyframe.spriteSheet({
      name: 'gem'+i,
      rows: rows,
      cols: 1,
      width: width,
      height: (height * rows),
      offsetX: offsetX,
      offsetY: 0
    }));
    offsetX += width;
}