CSS3 Sprite Animation ohne Tweening

Question

Lesen Sie unten für meine letzte Bearbeitung!

Ist es möglich, CSS3-Animationen zu verwenden, ohne dass die Animationen zwischen Frames tweenen?

Zum Beispiel habe ich ein Bild, dass ich zwei Zeichen Animation Sprites auf. Sie sind gleichmäßig 50px beabstandet. Wenn ich die folgende Animation verwende, bekomme ich immer noch ein Tween (obwohl es ein sehr schnelles Tween ist, so dass es wie ein Flimmern aussehen kann).

#ball .animated{ 
     -webkit-animation-name: animate; 
     -webkit-animation-duration: .5s; 
     -webkit-animation-iteration-count: infinite; 
     -webkit-animation-direction: alternate; 
     -webkit-animation-timing-function: linear;} 
@-webkit-keyframes animate{ 
     0%{-webkit-transform: translate3d(0,0,0);} 
     49%{-webkit-transform: translate3d(0,0,0);} 

     50%{-webkit-transform: translate3d(-50px,0,0);} 
     100%{-webkit-transform: translate3d(-50px,0,0);} 

So basierend auf dem obigen, der Sprite-Rahmen sollte auf dem ersten Teil des Bildes gehalten werden (x = 0 Pixel) für das erste 0-49% der Dauer und dann zum zweiten Teil des Sprung Bild (x = -50px) für 50-100%. Der Unterschied von 1% ist jedoch immer noch ausreichend, um ein Tween von 0 bis -50px visuell zu sehen.

Gedanken?

Edit:

-webkit-animation-timing-function: cubic-bezier(1,0,1,0); 

Die oben schien es ein wenig zu begradigen, aber nach einer Weile geht es zurück zu Flimmern.

Bearbeiten: Ich hatte nicht erkannt, dass Sie Dezimalstellen mit den Prozentsätzen verwenden konnten. Schließen die Lücke von 1% bis 0,1% schafft ein viel schnelleres Tweens, das fast nicht sichtbar ist (mit -webkit-animation-duration: < 1s;)

0%{-webkit-transform: translate3d(0,0,0);} 
49.9%{-webkit-transform: translate3d(0,0,0);} 

50%{-webkit-transform: translate3d(-50px,0,0);} 
100%{-webkit-transform: translate3d(-50px,0,0);} 

Schluss bearbeiten !: Ok, also von dem, was ich habe Bei gefundenen Web-Kit-Animationen wird eine Dezimalzahl bis zum millionsten Platz (dh 0,0001) akzeptiert. Was bei einem relativ schnellen Animationstimer zu einer sofortigen Übersetzung führt. Ein bisschen von einem Hack nehme ich an, aber es macht den Trick.

Beispiel:

@-webkit-keyframes sprite { 
0% { 
    -webkit-transform: translate3d(0,0,0); 
} 
50% { 
    -webkit-transform: translate3d(0,0,0); 
} 
50.0001%{ 
    -webkit-transform: translate3d(-50px,0,0); 
} 
100%{ 
    -webkit-transform: translate3d(-50px,0,0); 
} 
} 

Das obige Beispiel ist für ein Bild 100 Pixel (jeder Sprit auf dem Bild ist 50 Pixel breit) innerhalb eines Behälters div mit den width: 50px und overflow:hidden um nur das Bild einen Sprit zeigt in eine Zeit.

Hinweis: Ich verwende translate3d, weil es in mobilen Browsern hardwarebeschleunigt ist, wo translateX, translateY, translateZ noch nicht hardwarebeschleunigt sind.

Answer 1

Die allgemeine Idee von CSS Animation ist, nun, zu animieren. Wenn Sie möchten, dass Dinge von Position zu Position springen, dann sollten Sie nur die Position direkt über JavaScript festlegen und Ihre Iterationen mit JavaScript durchführen.

Wenn Sie jedoch Animationen verwenden möchten, haben Sie ein paar Optionen. Einer setzt die Deckkraft auf null und zurück auf eins mit zwei Füll-Keyframes. Alternativ können Sie den Z-Index ändern, um Ihr animierendes Objekt hinter einem maskierenden div zu verbergen, während die Übersetzung stattfindet. Z-Indizes können nicht miteinander verknüpft werden.

UPDATE: Schrittfunktionsübergänge wurden zur Spezifikation hinzugefügt und sind nun in Chrome implementiert. Sie können jetzt also genau das tun, was Sie tun wollten.

Answer 2

Es ist eine Weile her, seit diese Frage gestellt wurde, aber CSS3 hat jetzt eine Schritt-Timing-Funktion, also habe ich das für Sprite-Animationen verwendet.Von meinem codepen Beispiel bei http://codepen.io/natedsaint/pen/2/7:

/* Animation keyframes */ 
@keyframes walk { 
    0% { background-position:0px 0px;} 
    16.67% { background-position:-104px 0px;} 
    33.33% { background-position:-208px 0px;} 
    50% {background-position:-320px 0px;} 
    66.66% { background-position:-416px 0px;} 
    80.65% { background-position:-520px 0px;} 
    100% { background-position:-624px 0px;} 
} 

#guyBrush { 
    animation: walk infinite 1s steps(1,end); 
    background-image:url('http://www.nathanstpierre.com/gb_walk.png'); 
    width:104px; 
    height:152px; 
    position:absolute; 
    top:160px; 
    left:360px; 
} 

Der Vorteil hierbei ist, dass Sie die Geschwindigkeit durch Änderung der Dauer der Animation auf eine niedrigere Zahl verändern können. Ich habe einen Schieberegler implementiert, um dies zu zeigen.

Answer 3

Hier ist ein weiteres großartiges Beispiel mit steps().

Es ist eine einfache, aber leistungsstarke Möglichkeit zur Animation von Sprites. Unten ist eine Animation des alten Herzogs, der winkt.

@keyframes wink { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
.hi { 
 
    width: 50px; 
 
    height: 72px; 
 
    background-image: url("http://i.stack.imgur.com/1Ad8o.png"); 
 
    margin: 0 auto;  
 
    animation: wink .8s steps(10, end) infinite; 
 
}

<img src="http://i.stack.imgur.com/1Ad8o.png"> 
 
<div class="hi"></div>

Es gibt eine Demo Sie mit auf cssdeck spielen können.