CSS Sprite Animation Generator
Generieren Sie automatisch CSS-Animationscode
aus mehreren Bildern oder einem Sprite-Sheet
📏 Raster-Einstellungen
⚙️ Animations-Einstellungen
🎞️ Frame-Reihenfolge
Zum Sortieren ziehenDas könnte dir auch gefallen
Über den Sprite-Animationsgenerator
Der CSS Sprite Animation Generator ist ein kostenloses Online-Tool, das mithilfe der animation-Eigenschaft und der steps()-Funktion aus mehreren Frame-Bildern oder einem vorhandenen Sprite-Sheet automatisch CSS-Code für Animationen generiert.
Im Gegensatz zu GIF-Animationen bieten CSS-Sprites eine hohe Bildqualität ohne Qualitätsverlust. Sie ermöglichen es Ihnen, die Wiedergabegeschwindigkeit, Richtung und Iteration flexibel direkt über CSS zu steuern.
Alles, vom Laden der Bilder bis zur Code-Generierung, wird vollständig in Ihrem Browser verarbeitet. Ihre Bilder werden niemals auf einen Server hochgeladen.
So erstellen Sie CSS-Sprite-Animationen
Bilder Hochladen
Wählen Sie ein Sprite-Sheet aus oder laden Sie mehrere Einzelbilder hoch, um sie zusammenzuführen.
Animation Anpassen
Legen Sie Spalten, Zeilen, Geschwindigkeit und Richtung fest, während Sie die Live-Vorschau ansehen.
Code Erhalten
Laden Sie das generierte Sprite-Sheet herunter und kopieren Sie den CSS/HTML-Code.
CSS-Eigenschaften erklärt
Wie CSS animation + steps() funktioniert
Die steps()-Funktion wird in der CSS-Eigenschaft animation-timing-function verwendet. Anstelle von weichen Übergängen ändert sie Werte in diskreten (abgestuften) Schritten.
In der Sprite-Animation wird diese Eigenschaft verwendet, um die background-position sofort um die Breite eines Frames zu verschieben.
| Eigenschaft | Beschreibung | Rolle bei Sprites |
|---|---|---|
| animation-timing-function | Die Zeitkurve der Animation | Das Einstellen auf steps(N) verhindert glatte Übergänge. |
| background-position | Startposition des Hintergrunds | Wird innerhalb von @keyframes verschoben. |
| animation-duration | Die Zeit für einen Zyklus | Bestimmt die Wiedergabegeschwindigkeit (FPS). |
Animations-Glossar
- Sprite-Sheet
- Ein großes Bild, das mehrere kleine Bilder (Frames) enthält.
- steps() Funktion
- Eine CSS-Funktion, die Werte in diskreten Schritten anstatt reibungslos ändert.
- @keyframes
- CSS-Regel, die Zwischenzustände während einer Animation definiert.
- background-position
- CSS-Eigenschaft, die die Startposition eines Hintergrundbilds angibt.
- Alpha-Kanal
- Bilddaten für Transparenz. PNG ermöglicht schöne halbtransparente Verläufe.
Häufig gestellte Fragen
- F.Werden meine hochgeladenen Bilder auf einem Server gespeichert?
- Nein. Alle Bilder werden direkt in Ihrem Browser verarbeitet. Es werden keine Daten an externe Server gesendet.
- F.Was ist der Unterschied zwischen GIF-Animationen und CSS-Sprites?
- GIFs sind auf 256 Farben begrenzt. CSS-Sprites verwenden PNG für hohe Qualität und bieten volle CSS-Kontrolle.
- F.Kann ich Bilder unterschiedlicher Größe zusammenführen?
- Es wird nicht empfohlen. Alle Bilder müssen die gleiche Größe haben, andernfalls können sie abgeschnitten werden.
- F.Wie behebe ich Unschärfe auf Retina-Displays?
- Erstellen Sie Ihr Sprite-Sheet in doppelter Größe und verkleinern Sie es mit
background-size. - F.Gibt es eine maximale Größe?
- Halten Sie die Abmessungen unter 2048x2048 Pixel, um Speicherprobleme auf Mobilgeräten zu vermeiden.
Anwendungsfälle
Ladeanimationen
Ideal für Ladeanzeigen, die effizient über CSS laufen.
Charakterbewegung
Erstellen Sie Aktionsschleifen wie "Gehen" für Web-Charaktere.
Interaktive UI-Symbole
Generieren Sie nahtlose Animationen, die beim Überfahren (Hover) ausgelöst werden.
Banner-Werbung
Entwerfen Sie attraktive animierte Banner in hoher Bildqualität.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.