Wie animiert man mit CSS-Sprites in beide Richtungen (A oder B)?

Question

Ich schreibe eine Phonegap-Anwendung (mit HTML, CSS und Javascript) und ich bin im Bereich Animationen fest, obwohl ich einfache grundlegende Spritesheet-Animationen verwenden.

A) Ich habe versucht, die grundlegende Art und Weise zu animieren, aber ich habe 2 Probleme:

1) Wenn ich einen Vollraster spritesheet weiche nicht haben kann ich nicht haben, es zeigt auch die leeren Rahmen und ich weiß nicht wissen, wie man sie überspringt, ohne das gesamte Spritesheet in eine Zeile umwandeln zu müssen. (Ich habe gehört, dass Sie irgendwie jeden Rahmen definieren können, aber ich kann wirklich nicht finden, wie ich es mache.)

2) Neben den leeren Frames zeigt die Animation gut auf dem Desktop, aber wenn ich es anstelle Mobil sieht es ungefähr so ​​aus(), als wären die Schritte und die Geschwindigkeit nicht synchronisiert. Wenn ich versuche, das Jsfiddle in meinem Mobile-Browser zu starten, sieht alles genau so aus wie auf dem Desktop.

This ist der erste 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) Ich habe versucht, mit spritespin.js zu animieren. Das ist viel einfacher als der vorhergehende Code. Es berechnet alle Frames im Spritesheet, so dass keine leeren Frames angezeigt werden, aber es gibt auch 2 Probleme (sowohl auf dem Desktop als auch auf dem Handy):

1) Die Animation sieht abgehackt aus. Ich denke, das ist nur ein Neuanfang, dass das passiert, weil das Skript versucht, die Größe jedes Frames zu berechnen und schlecht zu vermasseln. (auch wenn ich die Breite und Höhe einstelle). Ist es möglich, diesen Teil zu überspringen? Es kam zu allen Rendering-Methoden (Hintergrund, Bild und auch Canvas, sowohl auf mobilen als auch auf dem Desktop)

2) Die Hintergrundgröße wird auch nicht richtig berechnet. Sie können einige Reste auf der Oberseite der Animation sehen, die unten sein sollte. Ist es möglich, die Hintergrundgröße mit ein paar Pixeln zu ändern? Ich benutze die gleichen Spritesheets in beiden Versionen, also denke ich nicht wegen dem Spritesheet .. oder?

This ist der zweite 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' 
}); 

Bitte helfen Sie mir so oder so A oder B vollständig zu lösen !! Ich bleibe jetzt für 3 Tage bei dieser Sache und ich habe es satt !!

Answer 1

Nun, vielleicht ist der einfachste Weg (und nur ein bisschen langweilig), alle Keyframes einzeln anzugeben. Wenn Sie 51 Frames haben, dauert jeder 1,96%.Geben Sie den Start für jeden Frame und Stoppzeit eine gestufte Bewegung

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

Überprüfen Sie die komplette Tutorial auf das geben, seine zeigt, wie Dropbox Homepage wie Animation, 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; 
    } 
}