如何以CSS方式动画（A或B）？

Question

我正在写一个应用程序的PhoneGap（使用HTML，CSS和JavaScript）和我被困在动画部分，虽然我用简单的基本spritesheet动画。

A）我试图动画的基本途径，但我有2个问题：

1）如果我没有满格spritesheet至极我可能没有，这也显示空框架，我不知道如何跳过它们而不需要将整个spritesheet转换成一行。 （我听说你可以以某种方式定义每一帧，但我真的无法找到如何去做，我到处搜索！）

2）除了空帧之外，动画在桌面上显示效果很好，但是当我尝试它时移动它看起来是这样的（http://jsfiddle.net/alecstheone/5pqmsd4a/4/）犹如步骤和速度不同步。如果我尝试在手机浏览器中运行jsfiddle，则所有内容都与桌面上显示的完全相同。

This是第一代码：

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）我试图与spritespin.js动画。这比以前的代码更容易。它计算所以没有空帧显示在spritesheet所有帧，但它也有2个问题（包括台式机和移动）：

1）动画看起来波涛汹涌。我认为，这仅仅是一个小白想到，这happends因为脚本试图计算出每帧的大小和严重搅乱。 （即使我设置了宽度和高度）。是否有可能跳过那部分？可以出现在所有的渲染方法（背景，图像也画布，无论是在移动和桌面）

2）的背景大小不计算藏汉权。您可以在动画顶部看到一些剩余物，它们需要位于底部。是否可以用几个像素更改背景大小？我在两个版本中使用相同的spritesheet，所以我不认为它是因为spritesheet ..或？

This是二码：

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' 
}); 

请帮我解决任何一种方式A或B完全！我现在住在这件事上已经3天了，我真的很厌烦它！

Answer 1

好了，可能是去有关的最简单的方法（和一点点有点无聊）是指定的所有关键帧，一个接一个。如果你有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; 
    } 
} 

Answer 2

检查这个完整的教程，它展示了如何创建Dropbox的主页喜欢动漫， https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb

.animatedDiv { 
    width: 820px; 
    height: 312px; 
    background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg"); 
    -webkit-animation: play 2s steps(48) infinite; 
    -moz-animation: play 2s steps(48) infinite; 
    -ms-animation: play 2s steps(48) infinite; 
    -o-animation: play 2s steps(48) infinite; 
    animation: play 2s steps(48) infinite; 
} 
@-webkit-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-moz-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-ms-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-o-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
}