如何以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; 
    } 
}