Untitled

dabblet.css

    #sprite {
    width: 200px;
    height: 170px;
    animation-duration:4000ms;
    animation-iteration-count:infinite;
    animation-timing-function:step-start;
    animation-name:animate01;
    animation-direction:forward;
}

@keyframes animate01 {
0%           { background:url('http://lorempixel.com/200/170/sports/1/')0 0; }
20%          { background:url('http://lorempixel.com/200/170/sports/2/')0 0; }
40%          { background:url('http://lorempixel.com/200/170/sports/3/')0 0; }
60%          { background:url('http://lorempixel.com/200/170/sports/4/')0 0; }
80%          { background:url('http://lorempixel.com/200/170/sports/5/')0 0; }
100%         { background:url('http://lorempixel.com/200/170/sports/1/')0 0; }
}​

dabblet.html

    <div id="sprite">
    </div>​

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}