Element pure CSS Animated sprite

Inspired by @_joshnh Original concept: http://jsfiddle.net/joshnh/23tAN/

by elcoyote67

HTML

<div class="sprite-question-box"></div>

SCSS

/* Pixel size (set to something bigger for a better look) */
$pixel: 15px;

/* Position helper */
@function p($c) { /* coord */
    @return $pixel * $c;
}

/* The main sprite and animation */
.sprite-question-box {
    height:$pixel;
    width:$pixel;
    /* The pixels are box-shadows with no blur radius */
    box-shadow:
        /* Row 1 */
            p(1) 0 0 #d8b018,
            p(2) 0 0 #d8b018,
            p(3) 0 0 #d8b018,
            p(4) 0 0 #d8b018,
            p(5) 0 0 #d8b018,
            p(6) 0 0 #d8b018,
            p(7) 0 0 #d8b018,
            p(8) 0 0 #d8b018,
            p(9) 0 0 #d8b018,
           p(10) 0 0 #d8b018,
           p(11) 0 0 #d8b018,
           p(12) 0 0 #d8b018,
           p(13) 0 0 #d0a820,
           p(14) 0 0 #d0a820,
        /* Row 2 */
            0 p(1) 0 #d8b018,
         p(1) p(1) 0 #e8c030,
         p(2) p(1) 0 #f8f8f8,
         p(3) p(1) 0 #f8f8f8,
         p(4) p(1) 0 #f8e888,
         p(5) p(1) 0 #f8e888,
         p(6) p(1) 0 #f8e888,
         p(7) p(1) 0 #f8e888,
         p(8) p(1) 0 #f8e888,
         p(9) p(1) 0 #f8e888,
        p(10) p(1) 0 #f8e888,
        p(11) p(1) 0 #f8e888,
        p(12) p(1) 0 #f8d028,
        p(13) p(1) 0 #f8d028,
        p(14) p(1) 0 #c8a018,
        p(15) p(1) 0 #884810,
        /* Row 3 */
            0 p(2) 0 #d8b018,
         p(1) p(2) 0 #f8e888,
         p(2) p(2) 0 #602800,
         p(3) p(2) 0 #e0b018,
         p(4) p(2) 0 #e0b018,
         p(5) p(2) 0 #e0b018,
         p(6) p(2) 0 #e0b018,
         p(7) p(2) 0 #e0b018,
         p(8) p(2) 0 #d8b018,
         p(9) p(2) 0 #d8b018,
        p(10) p(2) 0 #d8b018,
        p(11) p(2) 0 #d8b018,
        p(12) p(2) 0 #d0a820,
        p(13) p(2) 0 #602800,
        p(14) p(2) 0 #b08018,
        p(15) p(2) 0 #602800,
        /* Row 4 */
            0 p(3) 0 #d8b018,
         p(1) p(3) 0 #f8e888,
         p(2) p(3) 0 #e0b018,
         p(3) p(3) 0 #e0b018,
         p(4) p(3) 0 #f8f8f8,
         p(5) p(3) 0 #f8f8f8,
         p(6) p(3) 0 #f8f8f8,
  ...

JavaScript

/*
    Single Element pure CSS Animated sprite (frame 1)
    Created by @aaronlayton
    Inspired by @_joshnh
    
    Article: http://goo.gl/z5dQ1
    Original concept: http://jsfiddle.net/joshnh/23tAN/
*/