HTML-Animation in ein GIF umwandeln

Für READMEs, Pull Requests, Dokumentation, Chats und alle Stellen, an denen kein Video abgespielt wird. Code einfügen, Größe wählen, GIF herunterladen.

Oder starte mit einem Beispiel:

Lässt du den Code von einer KI schreiben?

Vorschau

Deine Animation läuft hier, sobald du sie einfügst.

Lass diesen Tab im Vordergrund, solange gerendert wird.

Herunterladen
Format
Seitenverhältnis
Sek.

Läuft auf deinem Gerät. Deine Datei wird nie hochgeladen.

So schreibt die KI exportfertigen Code

Hänge diesen Text an deine Anfrage an oder schicke ihn zusammen mit dem Code, den du schon hast. Das Ergebnis lässt sich dann ohne Nacharbeit rendern.

Drei Schritte
  1. 1
    Einfügen
    Füge das HTML ein oder ziehe eine .html- oder .zip-Datei hierher. Die Vorschau startet sofort.
  2. 2
    Prüfen
    Wähle das Seitenverhältnis passend zum Ziel. Die Länge wird aus der Animation gelesen, du kannst sie ändern.
  3. 3
    Exportieren
    Wähle MP4, GIF, transparentes WebM oder ein PNG-Einzelbild und lade die Datei herunter.
So schreibt die KI exportfertigen Code
Hänge diesen Text an deine Anfrage an oder schicke ihn zusammen mit dem Code, den du schon hast. Das Ergebnis lässt sich dann ohne Nacharbeit rendern.
Schreib diese Animation als eine einzige, eigenständige HTML-Datei um, die ich mit htmlto.video als Video exportieren kann:
- Gestalte sie für das Seitenverhältnis 16:9. Sie muss das Browserfenster genau ausfüllen (100vw mal 100vh, kein Scrollen). Gib alle Größen in vw und vh an, damit sie sich an jede Auflösung anpasst.
- Sie startet von selbst, sobald die Seite geladen ist, und braucht weder Maus noch Tastatur noch Scrollen.
- Sie hat eine feste Länge. Gib die Länge in einem Kommentar in der ersten Zeile an, zum Beispiel <!-- duration: 8s -->.
- Animiere mit CSS-Animationen, der Web Animations API, GSAP oder requestAnimationFrame mit dessen timestamp-Argument. Verwende kein Video, kein Audio und keine iframes.
- Schreib das gesamte CSS und JavaScript inline in die Datei. Bette Bilder als Inline-SVG oder Data-URLs ein. Schriften und Bibliotheken dürfen nur von einem CDN kommen, das Cross-Origin-Laden erlaubt, etwa Google Fonts, cdnjs oder jsDelivr.
- Antworte mit dem vollständigen HTML in einem einzigen Codeblock.
So wird das GIF gut
Kurz halten
Ein GIF wird schnell groß. Drei bis acht Sekunden in 480p passen meist für ein README oder eine Chatnachricht.
Schleifen ohne Sprung
Eine Animation in Schleife wird auf genau einen Durchlauf geschnitten, das GIF wiederholt sich also ohne Sprung.
Flächige Farben eignen sich am besten
Ein GIF fasst 256 Farben pro Bild. Flächige Formen und Text bleiben scharf, weiche Verläufe und Fotos zeigen Streifen.
Lieber mehr Qualität?
Exportiere aus demselben Code eine MP4-Datei. Sie ist schärfer und deutlich kleiner – überall dort, wo Videos unterstützt werden.
Was sich rendern lässt
  • CSS-Animationen und -Transitions
  • GSAP, anime.js, Motion und andere JavaScript-Bibliotheken
  • Canvas 2D
  • SVG, animiert mit CSS oder JavaScript
  • WebGL und Three.js
  • Die Web Animations API und requestAnimationFrame
Was noch nicht geht
  • Der Export wird in Safari sowie auf iPhones und iPads nicht unterstützt. Die Vorschau funktioniert dort.
  • Videos, Audio und iframes in der Seite werden weggelassen.
  • Bilder und Schriften von Servern, die Cross-Origin-Zugriff sperren, fehlen im Ergebnis.
  • Animationen, die auf Klick, Hover oder Scrollen warten, laufen nicht weiter.
  • SVG, das mit SMIL-Tags wie <animate> animiert ist, wird nicht erfasst.
  • Sehr aufwendige WebGL-Szenen können auf langsameren Computern scheitern.