Sprache: Deutsch

Mach aus deiner HTML-Animation ein GIF

Für READMEs, Pull Requests, Doku, Chats und überall dort, wo kein Video läuft. Code einfügen, Auflösung wählen, GIF herunterladen.

Oder fang mit einem Beispiel an:

Kommt dein Code von einer KI?

Vorschau

Sobald du HTML einfügst, läuft deine Animation hier.

Lass diesen Tab im Vordergrund, bis das Rendern fertig ist.

Herunterladen
Format
Seitenverhältnis
Sek.

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

So bekommst du exportfertiges HTML von der KI

Häng diesen Text an deine Anfrage an oder schick ihn zusammen mit dem Code, den du schon hast. So stehen die Chancen am besten, dass alles sauber gerendert wird.

So geht’s in drei Schritten
  1. 1
    Einfügen
    Füge das HTML ein oder zieh eine .html- oder .zip-Datei hierher. Die Vorschau startet sofort.
  2. 2
    Prüfen
    Wähle das Seitenverhältnis danach, wo das Video laufen soll. Die Dauer ermitteln wir aus der Animation – du kannst sie aber ändern.
  3. 3
    Exportieren
    Wähle MP4, GIF, transparentes WebM oder ein PNG-Einzelbild und lade die Datei herunter.
So bekommst du exportfertiges HTML von der KI
Häng diesen Text an deine Anfrage an oder schick ihn zusammen mit dem Code, den du schon hast. So stehen die Chancen am besten, dass alles sauber gerendert wird.
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 Dauer. Gib die Dauer 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.
Tipps für ein gutes GIF
Kurz halten
GIFs werden schnell groß. Für ein README oder eine Chatnachricht passen meist drei bis acht Sekunden in 480p.
Nahtlose Schleifen
Wiederholt sich eine Animation, schneiden wir sie auf genau einen Durchlauf. So läuft das GIF ohne Sprung in Schleife.
Flächige Farben wirken am besten
Ein GIF hat 256 Farben pro Einzelbild. Flächige Formen und Text bleiben scharf, weiche Verläufe und Fotos bekommen Streifen.
Lieber bessere Qualität?
Exportiere aus demselben Code ein MP4. Das ist schärfer und deutlich kleiner – überall dort, wo Videos erlaubt sind.
Was sich rendern lässt
  • CSS-Animationen und -Übergänge
  • GSAP, anime.js, Motion und andere JavaScript-Bibliotheken
  • Canvas 2D
  • Mit CSS oder JavaScript animiertes SVG
  • WebGL und Three.js
  • Web Animations API und requestAnimationFrame
Was noch nicht geht
  • Safari, iPhone und iPad können nicht exportieren. Die Vorschau funktioniert dort aber.
  • Videos, Audio und iframes in der Seite bleiben außen vor.
  • Bilder und Schriften von Servern, die anderen Websites keinen Lesezugriff erlauben, fehlen im Ergebnis.
  • Animationen, die auf Klick, Hover oder Scrollen warten, bleiben stehen.
  • SVG-Animationen mit SMIL-Tags wie <animate> werden nicht erfasst.
  • Sehr aufwendige WebGL-Szenen können auf langsameren Computern scheitern.