Wie animiert steps() ein sprite sheet?

steps(n) teilt die Animation in n gleiche Abschnitte und springt zwischen ihnen, statt zu interpolieren, sodass background-position von einem Frame zum nächsten schnappt. steps() gleich deiner Frame-Anzahl bedeutet, dass jeder Frame für einen Schritt gezeigt wird, ohne verschwommene Zwischenpositionen.

Muss ich mein Bild hochladen?

Nein. Das Hochladen eines sprite sheets gibt dir eine Live-Vorschau, aber du kannst korrektes CSS allein aus Frame-Breite, -Höhe und -Anzahl erzeugen. Ohne Bild zeigt die Vorschau ein Platzhalter-Raster, während die Berechnung und Ausgabe exakt bleiben.

Was ist der Unterschied zwischen Einzelreihen- und Raster-Modus?

Der Einzelreihen-Modus geht davon aus, dass alle Frames auf einem horizontalen Streifen sitzen, und gibt einen kompakten from/to-Keyframe aus. Der Raster-Modus verarbeitet mehrzeilige Sheets, indem er einen background-position-Stopp pro Frame ausgibt, über Spalten und dann nach unten über Reihen läuft und background-size hinzufügt, damit das ganze Sheet korrekt skaliert.

Sollte ich FPS oder eine Gesamtdauer festlegen?

Nutze FPS, wenn du weißt, wie viele Frames pro Sekunde abgespielt werden sollen; das Tool wandelt es in eine Dauer um, indem es die Frame-Anzahl durch die FPS teilt. Nutze die Gesamtdauer, wenn der ganze Loop unabhängig von der Frame-Anzahl eine bestimmte Anzahl Millisekunden dauern soll.

Wie lasse ich die Animation für immer oder nur einige Male laufen?

Wähle Unendlich für einen Dauer-Loop, was auf animation-iteration-count: infinite abbildet. Wähle Anzahl und gib eine Zahl ein, um die Sequenz eine feste Anzahl von Malen abzuspielen, und nutze die Richtungsoption für reverse- oder alternate-Wiedergabe.

Wird mein sprite sheet irgendwohin hochgeladen?

Nein. Das Bild wird lokal mit dem FileReader deines Browsers gelesen, um die Vorschau zu bauen, und verlässt dein Gerät nie; das erzeugte CSS wird vollständig auf deiner Maschine berechnet.

Sprite-Sheet-CSS-Animations-Generator

Verwandle ein sprite sheet direkt in deinem Browser in eine kopierfertige CSS-steps()-Animation mit Live-Vorschau.

Dein sprite sheet wird lokal in deinem Browser gelesen, um die Vorschau zu bauen und CSS zu erzeugen; das Bild wird niemals hochgeladen und bleibt auf deinem Gerät.

Räumst du die Ausgabe auf? Probiere den CSS Formatter.

Über Sprite-Sheet-CSS-Animation

Dieser Sprite-Sheet-CSS-Animations-Generator verwandelt einen Frame-Streifen oder ein Raster in eine kopierfertige CSS-Animation, gebaut auf @keyframes und der steps()-Timing-Funktion. Ziehe ein sprite-sheet-Bild hinein für eine Live-Vorschau oder tippe einfach Frame-Breite, -Höhe und -Anzahl ein und lass das Tool die background-position-Berechnung für dich erledigen. Es verarbeitet sowohl eine einzelne horizontale Reihe als auch ein volles Raster, läuft Frames zeilenweise über Spalten und dann Reihen ab und paart die Keyframes mit background-size, sodass jede Zelle exakt landet. Lege die Geschwindigkeit per FPS oder Gesamtdauer fest, benenne die Animation, wähle unendlich oder eine feste Iterationsanzahl und wähle eine Richtung. Du erhältst das vollständige CSS – Elementgröße, den @keyframes-Block und die animation-Kurzschreibweise –, das du kopieren oder als .css-Datei herunterladen kannst. Alles läuft auf deinem Gerät, sodass ein hochgeladenes Sheet lokal gelesen wird und deinen Browser nie verlässt.

Funktionen

Lade ein sprite sheet per Drag-and-Drop oder Dateiauswahl für eine sofortige Live-Vorschau hoch, oder arbeite allein mit Maßen
Der Einzelreihen-Modus gibt kompakte from/to-Keyframes aus, die background-position über den Streifen schrittweise bewegen
Der Raster-Modus gibt einen expliziten background-position-Stopp pro Frame aus, zeilenweise über Spalten und dann Reihen
Fügt im Raster-Modus background-size hinzu, damit jede Zelle exakt auf deine Frame-Maße skaliert
Lege das Timing per Frames-pro-Sekunde oder per Gesamtdauer in Millisekunden fest
Wähle unendliches Looping oder eine feste Iterationsanzahl, plus die Richtung normal, reverse oder alternate
Bereinigt den Animationsnamen automatisch zu einem gültigen CSS-Bezeichner
Kopiere das vollständige CSS oder lade es mit einem Klick als .css-Datei herunter

So verwendest du Sprite-Sheet-CSS-Animation

Lade ein sprite sheet hoch oder überspringe den Upload und gib einfach deine Frame-Maße ein.
Wähle Einzelreihe oder Raster, lege dann Frame-Breite, -Höhe und -Anzahl fest (plus Spalten und Reihen für ein Raster).
Lege die Geschwindigkeit per FPS oder Gesamtdauer fest, benenne dann die Animation und wähle Iteration und Richtung.
Sieh dem Element in der Live-Vorschau bei der Animation zu, um zu bestätigen, dass die Rahmung stimmt.
Kopiere das erzeugte CSS oder lade es als .css-Datei herunter und lege es in dein Projekt.

Beispiel

Eingabe

8 frames, 64×64 each, single row, 12 fps, infinite

Ausgabe

.sprite {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  animation: sprite 0.667s steps(8) infinite normal;
}

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}

Ein Einzelreihen-Sheet braucht nur steps(8) und einen Zwei-Stopp-Keyframe, um alle Frames abzuspielen.

Häufige Fehler & Fehlerbehebung

Die Animation ruckelt oder zeigt einen Streifen des nächsten Frames. — Stelle sicher, dass Frame-Breite und -Höhe exakt zum Sheet passen. Wenn die Zellen ungleich sind, beschneide das Sheet, sodass jeder Frame dieselbe Größe hat.
Nur der erste Frame wird angezeigt und nichts bewegt sich. — Prüfe, dass die Frame-Anzahl mindestens 2 ist und dass background-repeat auf no-repeat bleibt, damit das Sheet nicht gekachelt wird.
Ein Raster-Sheet spielt die falschen Frames ab oder driftet diagonal. — Bestätige, dass Spalten und Reihen zum Sheet-Layout passen; das Tool läuft Frames von links nach rechts und dann von oben nach unten ab, daher müssen die Anzahlen stimmen.
Die Animation läuft zu schnell oder zu langsam. — Wechsle den Timing-Modus zwischen FPS und Gesamtdauer. Die Gesamtdauer geteilt durch die Frame-Anzahl ergibt die Zeit pro Frame.

Häufig gestellte Fragen

Wie animiert steps() ein sprite sheet?: steps(n) teilt die Animation in n gleiche Abschnitte und springt zwischen ihnen, statt zu interpolieren, sodass background-position von einem Frame zum nächsten schnappt. steps() gleich deiner Frame-Anzahl bedeutet, dass jeder Frame für einen Schritt gezeigt wird, ohne verschwommene Zwischenpositionen.
Muss ich mein Bild hochladen?: Nein. Das Hochladen eines sprite sheets gibt dir eine Live-Vorschau, aber du kannst korrektes CSS allein aus Frame-Breite, -Höhe und -Anzahl erzeugen. Ohne Bild zeigt die Vorschau ein Platzhalter-Raster, während die Berechnung und Ausgabe exakt bleiben.
Was ist der Unterschied zwischen Einzelreihen- und Raster-Modus?: Der Einzelreihen-Modus geht davon aus, dass alle Frames auf einem horizontalen Streifen sitzen, und gibt einen kompakten from/to-Keyframe aus. Der Raster-Modus verarbeitet mehrzeilige Sheets, indem er einen background-position-Stopp pro Frame ausgibt, über Spalten und dann nach unten über Reihen läuft und background-size hinzufügt, damit das ganze Sheet korrekt skaliert.
Sollte ich FPS oder eine Gesamtdauer festlegen?: Nutze FPS, wenn du weißt, wie viele Frames pro Sekunde abgespielt werden sollen; das Tool wandelt es in eine Dauer um, indem es die Frame-Anzahl durch die FPS teilt. Nutze die Gesamtdauer, wenn der ganze Loop unabhängig von der Frame-Anzahl eine bestimmte Anzahl Millisekunden dauern soll.
Wie lasse ich die Animation für immer oder nur einige Male laufen?: Wähle Unendlich für einen Dauer-Loop, was auf animation-iteration-count: infinite abbildet. Wähle Anzahl und gib eine Zahl ein, um die Sequenz eine feste Anzahl von Malen abzuspielen, und nutze die Richtungsoption für reverse- oder alternate-Wiedergabe.
Wird mein sprite sheet irgendwohin hochgeladen?: Nein. Das Bild wird lokal mit dem FileReader deines Browsers gelesen, um die Vorschau zu bauen, und verlässt dein Gerät nie; das erzeugte CSS wird vollständig auf deiner Maschine berechnet.