CSS-Text-Animation-Generator
Text animieren ohne JavaScript: Schreibmaschine, Welle, Einblenden, Unschärfe oder Neon – Tempo einstellen und Code kopieren.
Der CSS-Text-Animation-Generator animiert Überschriften ohne JavaScript: Schreibmaschine mit blinkendem Cursor, Welle, Einblenden, Auftauchen aus der Unschärfe, Umklappen oder flackerndes Neon. Dauer, Versatz pro Buchstabe, Farbe, Größe und Wiederholung sind einstellbar. Der Code bleibt für Screenreader lesbar und respektiert reduzierte Bewegung.
<p class="anim-text">
<span class="sr-only">Mach’s klar!</span>
<span aria-hidden="true"><span class="char" style="--i: 0">M</span><span class="char" style="--i: 1">a</span><span class="char" style="--i: 2">c</span><span class="char" style="--i: 3">h</span><span class="char" style="--i: 4">’</span><span class="char" style="--i: 5">s</span><span class="char" style="--i: 6"> </span><span class="char" style="--i: 7">k</span><span class="char" style="--i: 8">l</span><span class="char" style="--i: 9">a</span><span class="char" style="--i: 10">r</span><span class="char" style="--i: 11">!</span></span>
</p>Text-Animationen mit CSS
Die meisten Text-Effekte entstehen aus zwei Zutaten: @keyframes mit dem
Bewegungsablauf und einem zeitlichen Versatz pro Buchstabe. Animiert werden nur transform, opacity und filter, damit es flüssig läuft.
| Effekt | Technik | Passt zu |
|---|---|---|
| Schreibmaschine | width mit steps(), Cursor per border-right | Hero, Terminal-Optik |
| Welle | translateY pro Buchstabe | Verspielte Überschriften |
| Einblenden | opacity + translateY | Seitenstart, Abschnitte |
| Neon | text-shadow mit Flacker-Keyframes | Dunkle Designs |
Eigene Keyframes für beliebige Elemente baust du im CSS-Animation-Generator, das Timing im Easing-Generator.
Häufige Fragen
Wie werden einzelne Buchstaben animiert?
Jeder Buchstabe steckt in einem eigenen span mit der Variable --i für seine Position. Die Animation startet mit animation-delay: calc(var(--i) * Versatz), so läuft der Effekt Buchstabe für Buchstabe durch.
Liest ein Screenreader den zerlegten Text richtig vor?
Die einzelnen Buchstaben sind mit aria-hidden ausgeblendet. Daneben steht der ganze Text in einem visuell versteckten span, den Screenreader als normales Wort vorlesen.
Warum braucht die Schreibmaschine eine Monospace-Schrift?
Die Animation vergrößert die Breite in Schritten von einem ch, also der Breite des Zeichens „0“. Nur bei Schriften mit gleich breiten Zeichen passt jeder Schritt genau zu einem Buchstaben.
Was passiert bei „Bewegung reduzieren“?
Die Media-Query prefers-reduced-motion schaltet die Animation ab. Der Text erscheint dann sofort vollständig und ruhig.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.