How to animate with CSS sprites either way (A or B)?

Question

I'm writing a phonegap application (using html, css and javascript) and I'm stuck at the animations part, although I'm using simple basic spritesheet animations.

A) I tried to animate the BASIC way but I have 2 problems:

1) If I dont have a full grid spritesheet wich I may not have, it displays also the empty frames and I don't know how to skip them without needing to convert the entire spritesheet into one row. (I heared that you can define somehow each frame but I really can't find how to do it, I searched everywhere!)

2) Beside the empty frames the animation shows good on the desktop but when I try it on mobile it looks something like this (http://jsfiddle.net/alecstheone/5pqmsd4a/4/) as if the steps and speed aren't synchronized. If I try to run the jsfiddle inside my mobile-browser everything shows up exactly as on desktop.

This is the First code:

HTML:

<div id="container">
    <div class="hi"></div>
</div>

CSS:

.hi {
    width: 389px;
    height: 238px;
    background-image: url("http://i.imgur.com/XOmx2Mm.png");
    position: relative;
    border: solid 1px black;
    -webkit-animation: playv 1.2s steps(6) infinite, playh 0.2s steps(9) infinite;
}
#container {
}
/* .hi:before {
    content: "";
    position: absolute;
    width: 176px;
    height: 108px;
    left: 0px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(9) infinite; 
}  */
 @-webkit-keyframes playv {
    0% {
        background-position-y: 0px;
    }
    100% {
        background-position-y: -1429px;
    }
}
@-webkit-keyframes playh {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: -3500px;
    }
}

B) I tried to animate with spritespin.js. This is way easier than the code before. It calculates all the frames in the spritesheet so no empty frames are displayed but it have also 2 problems (both on desktop and on mobile):

1) The animation looks choppy. I think, this is just a noob thought, that this happends because the script tries to calculate the size of each frame and messes up badly. (even if I set the width and height). Is it possible to skip that part? It happends on all the rendering methods (background, image and also canvas, both on mobile and on the desktop)

2) The background size isn't calculated aswell right. You can see some leftovers on the top of the animation wich needed to be on the bottom of it. Is it possible to change the background size with a few pixels? I use te same spritesheets in both versions so I don't think its because of the spritesheet.. or?

This is the Second code:

JS:

.../*! SpriteSpin - v3.1.5
 * Copyright (c) 2014 ; Licensed  */...

$(".hi").spritespin({
    source: "http://i.imgur.com/XOmx2Mm.png", // path to sprite sheet
    width: 390, // width in pixels of the window/frame
    height: 239, // height in pixels of the window/frame
    frames: 51, // total number of frames
    framesX: 9, // number of frames in one row inside the spritesheet
    frameTime: 60,
    renderer: 'image'
});

PLEASE help me solve either way A or B fully!! I'm staying at this thing for 3 days now and I'm really sick of it!!

Answer 1

Well, may be the easiest way to go about that (and just a little bit boring) is to specify all the keyframes one by one. if you have 51 frames, each one lasts 1.96%. Specify for each frame the start and stop time to give a stepped movement

@-webkit-keyframes playv {
    0%, 1.96% {
        background-position: 0px 0px;
    }
    1.96%, 3.92% {
        background-position: 50px 0px;
    }
    3.92%, 5.88% {
        background-position: 100px 0px;
    }
}