Spritesheet Test

by Jake Cattrall

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.js"></script>
<div class="spriteContainer"></div>

CSS

.spriteContainer{
    width: 30px;
    height: 30px;
    background-image: url(http://i.imgur.com/wqjhb7I.png);
    animation: gem 4s steps(1, end) infinite;
    -webkit-animation: gem 4s steps(1, end) infinite;
}

@-webkit-keyframes gem {
    0% {
        background-position: -0px -0px;
    }

    3% {
        background-position: -30px -0px;
    }

    5% {
        background-position: -60px -0px;
    }

    8% {
        background-position: -90px -0px;
    }

    10% {
        background-position: -120px -0px;
    }

    13% {
        background-position: -150px -0px;
    }

    15% {
        background-position: -180px -0px;
    }

    18% {
        background-position: -210px -0px;
    }

    21% {
        background-position: -240px -0px;
    }

    23% {
        background-position: -30px -30px;
    }

    26% {
        background-position: -60px -30px;
    }

    28% {
        background-position: -90px -30px;
    }

    31% {
        background-position: -120px -30px;
    }

    33% {
        background-position: -150px -30px;
    }

    36% {
        background-position: -180px -30px;
    }

    38% {
        background-position: -210px -30px;
    }

    41% {
        background-position: -240px -30px;
    }

    44% {
        background-position: -30px -60px;
    }

    46% {
        background-position: -60px -60px;
    }

    49% {
        background-position: -90px -60px;
    }

    51% {
        background-position: -120px -60px;
    }

    54% {
        background-position: -150px -60px;
    }

    56% {
        background-position: -180px -60px;
    }

    59% {
        background-position: -210px -60px;
    }

    62% {
        background-position: -240px -60px;
    }

    64% {
        background-position: -30px -90px;
    }

    67% {
        background-position: -60px -90px;
    }

    69% {
        background-position: -90px -90px;
    }

    72% {
        background-position: -120px -90px;
    }

    74% {
        background-position:...