HTML-zu-GIF-Konverter
Wandeln Sie HTML- und CSS-Animationen in ein herunterladbares animiertes GIF um. Fügen Sie Markup mit einer CSS-Animation oder Transition ein, sehen Sie eine Live-Vorschau, erfassen Sie eine Sequenz von Einzelbildern und exportieren Sie ein sich wiederholendes GIF – alles in Ihrem Browser.
100% Client-seitige Verarbeitung
Ihr HTML wird vollständig in Ihrem Browser gerendert und konvertiert. Es wird nichts auf einen Server hochgeladen.
Es werden 20 Einzelbilder Ihrer Animation erfasst. Mehr Einzelbilder und höhere Auflösung dauern länger beim Kodieren.
Vorschau
Aus Sicherheitsgründen sind <script>-Tags in der Vorschau und beim Export deaktiviert. Styling (CSS), CSS-Animationen und Bilder werden normal dargestellt.
Inhaltsverzeichnis
Was ist ein HTML-zu-GIF-Konverter?
Ein HTML-zu-GIF-Konverter nimmt HTML- und CSS-Markup – einschließlich CSS-Animationen, Transitions und Keyframe-Effekten – und zeichnet es als eine Sequenz von Einzelbildern auf, die zu einem einzelnen sich wiederholenden animierten GIF zusammengefügt werden, bereit zum Herunterladen oder Teilen überall.
Anders als ein Tool für statische Screenshots erfasst er, wie sich Ihr Inhalt über die Zeit verändert – so kann ein hüpfender Loader, ein Tipp-Effekt, eine ausblendende Karte oder ein sich drehendes Icon aus reinem CSS zu einem teilbaren animierten Bild werden, ganz ohne Bildschirmaufnahme-Software.
Wie es funktioniert
- Animiertes HTML hinzufügen: HTML/CSS mit einer CSS-Animation oder Transition einfügen oder eine .html-Datei hochladen.
- Live-Vorschau ansehen: Das Tool rendert Ihr Markup in einer isolierten Vorschau bei der gewählten Erfassungsbreite und spielt die Animation in Echtzeit ab.
- Erfassungseinstellungen wählen: Dauer, Bildrate, Auflösung, Hintergrund und GIF-Qualität auswählen.
- Erfassen und kodieren: Das Tool macht in jedem Bildintervall über die gewählte Dauer einen Schnappschuss der Vorschau und kodiert dann alle Einzelbilder in ein einzelnes animiertes GIF.
- Herunterladen: Das fertige GIF wird automatisch heruntergeladen, bereit für die Endlosschleife überall dort, wo Sie es platzieren.
Funktionen
- HTML einfügen oder eine .html-Datei hochladen
- Live-Vorschau, die Ihre CSS-Animation vor der Umwandlung abspielt
- Anpassbare Erfassungsdauer (1-5 Sekunden) und Bildrate (5/10/15 fps)
- Anpassbare Erfassungsbreite in Pixeln, mit 1x- oder 2x-Auflösung
- Weißer oder benutzerdefinierter Hintergrund
- Niedrige, mittlere oder hohe GIF-Qualität zur Abwägung zwischen Schärfe und Dateigröße
- Optionale Endlosschleife
- Echtzeit-Fortschrittsanzeige während Erfassung und Kodierung
- 100% clientseitige Verarbeitung für Datenschutz
Best Practices
- CSS-Keyframe-Animationen verwenden: Definieren Sie Ihre Bewegung mit @keyframes oder Transitions in einem <style>-Tag, damit Vorschau und Erfassung sie automatisch abspielen.
- Dauer an einen Animationszyklus anpassen: Stellen Sie die Erfassungsdauer nahe an ein Vielfaches der Länge Ihrer Animation ein, damit das GIF nahtlos schleift.
- Erfassungsbereich klein halten: Kleine Widgets wie Loader, Badges oder kurze Banner werden schneller erfasst und ergeben kleinere, sauberere GIF-Dateien als ganze Seiten.
- Höhere Bildrate für flüssige Bewegung verwenden: 10-15 fps wirkt bei schneller Bewegung merklich flüssiger, während 5 fps für langsame Überblendungen ausreicht.
- Qualität und Dateigröße abwägen: Verwenden Sie Hoch für detaillierte Verläufe oder Fotos und Niedrig für einfache, flächige UI, um die Datei klein zu halten.
- Zuerst mit dem Beispiel testen: Laden Sie das Beispiel mit den hüpfenden Punkten, um eine funktionierende Endlosanimation zu sehen, bevor Sie eigenes Markup einfügen.
Fehlerbehebung
Das GIF wirkt nicht animiert
Stellen Sie sicher, dass Ihr HTML tatsächlich eine CSS-Animation, Transition oder einen Keyframe-Effekt enthält – eine statische Seite ohne Bewegung erzeugt ein GIF, bei dem jedes Einzelbild gleich aussieht.
Die Schleife hat einen sichtbaren Sprung oder ruckelt
Passen Sie die Dauer so an, dass sie einem vollständigen Vielfachen der CSS-animation-duration entspricht, oder stellen Sie die CSS-Animation auf infinite, damit sie beim Start der Erfassung bereits läuft.
Die Konvertierung ist langsam
Das Erfassen und Kodieren vieler Einzelbilder in hoher Auflösung benötigt reale Browserzeit. Verringern Sie Dauer, Bildrate, Auflösung oder GIF-Qualität für ein schnelleres Ergebnis.
Bilder fehlen im GIF
Externe Bilder auf anderen Domains ohne passende CORS-Header können nicht erfasst werden. Verwenden Sie Bilder derselben Origin oder wandeln Sie sie in Base64-Data-URIs um.
Farben wirken gestreift oder gedithert
GIF unterstützt maximal 256 Farben pro Einzelbild, daher können weiche Verläufe oder Fotos sichtbare Streifen zeigen. Dies ist eine Einschränkung des GIF-Formats, nicht des Konverters – probieren Sie die höhere Qualitätsstufe, um es zu verringern.
Häufige Anwendungsfälle
- Ladeanimationen und Statusanzeigen: Verwandeln Sie einen reinen CSS-Loader oder eine Fortschrittsanimation in ein GIF für Orte, an denen kein Live-CSS läuft, wie Dokumentation oder App-Store-Screenshots.
- Produktdemos und UI-Vorschauen: Erfassen Sie einen kleinen, interaktiv wirkenden Effekt (Hover-Zustand, Umschalter, Transition) als teilbares GIF für ein README, einen Blogbeitrag oder ein Pitch-Deck.
- Chat und Social Sharing: Exportieren Sie eine kurze Marken-Animation als GIF, um sie in Slack, Discord oder soziale Medien einzufügen, wo Video-Uploads unpraktisch sind.
- E-Mail- und Newsletter-Grafiken: Fügen Sie einem E-Mail ein dezentes animiertes Badge oder Icon mit einem leichten GIF hinzu, da die meisten E-Mail-Clients eingebettete CSS-Animationen nicht ausführen.
- Design-Übergabe und QA: Zeichnen Sie auf, wie sich eine CSS-Animation tatsächlich verhält, und fügen Sie das GIF einem Ticket oder Design-Review bei, statt die Bewegung mit Worten zu beschreiben.
Häufig gestellte Fragen
Ja. Ihr HTML wird vollständig in Ihrem Browser gerendert, erfasst und kodiert und niemals auf einen Server hochgeladen.
Nein. Script-Tags sind in der Vorschau und beim Export aus Sicherheitsgründen deaktiviert, sodass interaktive Skripte nicht ausgeführt werden – CSS-Animationen und Transitions funktionieren aber normal.
Dieses Tool hält den GIF-Export einfach, indem es auf einen einfarbigen Hintergrund rendert, da GIF-Transparenz ein hartes Ein/Aus-Cutout ist statt der weichen Alpha-Überblendung, die PNG bietet. Wenn Sie ein transparentes Bild benötigen, verwenden Sie stattdessen den Tooladex HTML-zu-PNG-Konverter.
Die Dauer ist auf 5 Sekunden begrenzt, damit die browserseitige Erfassung und Kodierung schnell und zuverlässig bleibt. Erwägen Sie bei längeren Animationen, mehrere kürzere Clips zu erfassen.
Das Tool erfasst für jedes einzelne Bild einen echten Screenshot und kodiert sie dann zusammen, sodass mehr Einzelbilder, höhere Auflösung oder höhere Qualität die Verarbeitungszeit erhöhen.
Ja. Deaktivieren Sie „Endlosschleife" vor der Umwandlung, dann spielt das exportierte GIF einmal ab, statt sich endlos zu wiederholen.
Bilder, die von anderen Domains ohne CORS-Unterstützung geladen werden, können aus Sicherheitsgründen des Browsers nicht erfasst werden. Verwenden Sie stattdessen Bilder derselben Origin oder Base64-Data-URIs.
Nein. Alles geschieht lokal in Ihrem Browser und das GIF wird direkt auf Ihr Gerät heruntergeladen.