Jak animować z ikonkami CSS w dowolny sposób (A lub B)?

Question

Piszę aplikację phonegap (używając html, css i javascript) i utknąłem w części animacji, chociaż używam prostych podstawowych animacji spriteheet.

A) Starałem się animować sposób prosty, ale mam 2 problemy:

1) Jeśli nie mam pełną siatkę spritesheet Wich może nie mam, to wyświetla również pustych klatek i nie wiedzieć, jak je pominąć, bez konieczności konwertowania całego arkusza spriteheet w jeden wiersz. (Słyszałem, że możesz zdefiniować jakoś każdą klatkę, ale naprawdę nie mogę tego znaleźć, szukałem wszędzie!)

2) Obok pustych klatek animacja pokazuje się dobrze na pulpicie, ale kiedy próbuję go urządzenie mobilne wygląda mniej więcej tak (http://jsfiddle.net/alecstheone/5pqmsd4a/4/), tak jakby kroki i prędkość nie były zsynchronizowane. Jeśli spróbuję uruchomić jsfiddle w mojej przeglądarce mobilnej, wszystko wyświetla się dokładnie tak, jak na pulpicie.

This jest pierwszy kod:

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) Starałem się animować z spritespin.js. To jest łatwiejsze niż poprzedni kod. Oblicza wszystkie klatki w arkuszu sprite, więc nie są wyświetlane puste ramki, ale ma również 2 problemy (zarówno na komputerze stacjonarnym, jak i komórkowym):

1) Animacja wygląda na wzburzoną. Sądzę, że to tylko myśl noobowa, że ​​tak się dzieje, ponieważ skrypt próbuje obliczyć rozmiar każdej klatki i źle się robi. (nawet jeśli ustawię szerokość i wysokość). Czy można pominąć tę część? Dzieje się tak na wszystkich metodach renderowania (tło, obraz i płótno, zarówno na urządzeniu mobilnym, jak i na pulpicie).

2) Rozmiar tła nie jest obliczany tak samo jak prawo. Możesz zobaczyć resztki na górze animacji, która powinna znajdować się na samym dole. Czy można zmienić rozmiar tła za pomocą kilku pikseli? Używam tych samych arkuszy sprite w obu wersjach, więc nie myślę o tym z powodu arkusza sprite .. lub?

This jest drugi kod:

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

Proszę mi pomóc rozwiązać albo sposób A lub B w pełni !! Zostaję w tej rzeczy od 3 dni i naprawdę mam tego dość !!

Answer 1

Cóż, może być najłatwiejszym sposobem na zrobienie tego (i trochę nudne) jest określenie wszystkich klatek kluczowych jedna po drugiej. jeśli masz 51 klatek, każda z nich trwa 1,96%.Określić dla każdej ramki rozpoczęcia i zakończenia czasu, aby dać schodkową ruchowi

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

Skontrolować kompletny poradnik na ten temat, jego pokazujący jak stworzyć stronę główną Dropbox jak animacja, 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; 
    } 
}