如何以任意方式（A或B）使用CSS精灵设置动画？

我正在编写一个phonegap应用程序（使用html、css和javascript），虽然我使用的是简单的基本spritesheet动画，但我仍然停留在动画部分

A） 我尝试以基本方式制作动画，但我有两个问题：

1） 如果没有完整的网格精灵表，它也会显示空帧，我不知道如何跳过它们，而不需要将整个精灵表转换为一行。（我听说你可以以某种方式定义每一帧，但我真的找不到怎么做，我到处都找了！）

2） 除了空帧之外，桌面上的动画效果很好，但当我在移动设备上尝试时，它看起来像这样（），好像步骤和速度没有同步。如果我试着在我的移动浏览器中运行JSFIDLE，所有的东西都会像在桌面上一样显示出来

是第一个代码：

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

.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;
    }
}

.../*! 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'
});

HTML:

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

.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;
    }
}

.../*! 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'
});

B） 我尝试使用spritespin.js制作动画。这比以前的代码简单多了。它计算精灵表中的所有帧，因此不会显示空帧，但它还有两个问题（桌面和移动设备上）：

1） 动画看起来有些起伏。我认为，这只是一个noob的想法，因为脚本试图计算每一帧的大小，结果搞砸了。（即使我设置了宽度和高度）。可以跳过那部分吗？它发生在所有渲染方法上（背景、图像和画布，无论是在移动设备上还是在桌面上）

2） 背景大小的计算也不正确。你可以在动画的顶部看到一些剩余的东西，它们需要放在动画的底部。可以用几个像素改变背景大小吗？我在两个版本中使用相同的精灵表，所以我不认为这是因为精灵表。。还是

是第二个代码：

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

.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;
    }
}

.../*! 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'
});

JS:

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

.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;
    }
}

.../*! 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'
});

---

请帮我完全解决A或B两种方法！！我已经在这件事上呆了三天了，我真的受够了

也许最简单的方法就是一个接一个地指定所有的关键帧。如果你有51帧，每一帧持续1.96%。为每个帧指定开始和停止时间，以进行阶梯式移动

@-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;
    }
}

---

查看完整的教程，它展示了如何创建Dropbox主页，比如动画，

---

谢谢你的回复。。我想这将是一个更简单的方法（不需要计算百分比），我会试试，我会让你知道我做了什么：你可以检查这个