Die kurze Antwort

Für Live-Text auf einer Seite reicht CSS steps(). Für eine Datei zum Teilen in Chats, Dokumenten oder Präsentationen nutze einen GIF-Generator im Browser.

Reiner CSS-Schreibmaschineneffekt

Für einzeiligen Text im Web animiert der klassische CSS-Trick die Breite des Elements mit steps(), sodass Buchstaben wie getippt erscheinen. Ein rechter Rahmen dient als Cursor:

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid currentColor;
  width: 0;
  animation:
    typing 3s steps(11, end) forwards,
    blink 0.8s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

Die Zahl in steps(11, end) muss zur Zeichenzahl passen, 3s bestimmt die Geschwindigkeit. Das funktioniert gut für Hero-Bereiche und Überschriften, ist aber bei mehrzeiligem Text, eigenen Schriften und Dateiexport umständlich.

Brauchst du den Effekt als Datei?

Unser Typing-Text-GIF-Generator exportiert dieselbe Animation als Endlos-GIF, das überall funktioniert.

GIF erstellen

Frontend-Komponentenbibliotheken

Mit React oder Vue liefern Komponentenbibliotheken einen fertigen Schreibmaschineneffekt mit Optionen für Tempo, Cursor und Schleife. Framer enthält Typing-Varianten, MagicUI bietet eine TypingAnimation-Komponente, und Pakete wie react-type-animation oder typed.js sind schnell installiert.

Um das Aussehen der Komponente in eine portable Datei zu verwandeln, erstelle das GIF mit dem kostenlosen Generator.

Videoschnittprogramme

Für ein besonders poliertes Ergebnis sind Videoschnittprogramme der klassische Weg. In CapCut fügst du eine Textebene hinzu und wendest die Animation „Typewriter“ an. In After Effects zerlegt ein Source-Text-Keyframe-Ausdruck die Zeichenkette Buchstabe für Buchstabe, ergänzt durch ein kleines Rechteck als blinkenden Cursor. Das bietet viel Kontrolle, erfordert aber für jede Textänderung einen neuen Export.

Wenn du nur eine saubere Schreibschleife ohne Timeline brauchst, erzeugt der GIF-Generator sie in Sekunden.

Kostenloser Online-GIF-Generator (empfohlen)

Für Chats, READMEs, Social Posts und Dokumentation ist ein Endlos-GIF das portabelste Format und benötigt keine Software:

Text eingeben — bis zu 200 Zeichen, Zeilenumbrüche möglich.
Stil und Tempo wählen — neun Schriften, eigene Farben oder transparenter Hintergrund, Cursor, vier Formate und fünf Geschwindigkeiten.
GIF herunterladen — im Browser erzeugt, kostenlos und ohne Wasserzeichen.

Probiere den Typing-Text-GIF-Generator aus: Er läuft komplett im Browser, auf iPhone und Android, ohne Anmeldung.