# Textanimationen für Social: vier Stile, die funktionieren

[Canonical HTML page](https://gradiently.design/de/guide/text-animation-ideas)

Du brauchst keine fünfzig Effekte. Vier Auftritte, gut gewählt und richtig getimt, bewältigen Stories, Reels, Ankündigungen und Zitate. Hier siehst du, welche wann passt.

## The short version

- Aufsteigen, Aufploppen, Wischen und Schreibmaschine sind vier Textanimationen, die die meisten Social-Media-Posts abdecken.
- Aufsteigen passt zu ruhigen, hochwertigen und redaktionellen Botschaften; Aufploppen zu kurzen, energiegeladenen Wörtern wie Preisen und Angeboten.
- Wischen enthüllt eine Zeile wie ein Vorhang und funktioniert bei Schlagzeilen und Vorher-nachher-Enthüllungen; Schreibmaschine passt zu Zitaten, Fragen und allem, was sich wie im Moment geschrieben anfühlen soll.
- Die meisten Auftritts-Animationen lesen sich am besten zwischen etwa einer Viertel- und drei Vierteln einer Sekunde, gefolgt von einem Halten, das lang genug ist, um die Zeile zweimal zu lesen.
- Nutze einen Animationsstil für einen Post oder eine Serie und staffle Zeilen, statt jedes Wort anders zu animieren.

Für Social-Posts erledigen vier **Textanimationen** fast alles: **Aufsteigen** (Wörter schweben nach oben und blenden ein, ruhig und hochwertig), **Aufploppen** (Wörter skalieren mit kleinem Federn herein, kurz und laut), **Wischen** (eine Zeile wird von einer Seite her enthüllt, wie ein Vorhang) und **Schreibmaschine** (Buchstaben erscheinen einzeln, als würde gerade geschrieben). Passe den Stil zur Botschaft an, halte jeden Auftritt unter etwa drei Vierteln einer Sekunde und halte die Wörter dann lange genug still, um sie zweimal zu lesen. Nutze einen Stil pro Post. Das ist das meiste vom Handwerk.

## Die vier Textanimationen im Überblick

| Animation | Wirkung | Einsatz für | Dauer des Auftritts |
| --- | --- | --- | --- |
| Aufsteigen | Ruhig, selbstsicher, hochwertig | Schlagzeilen, Launches, Zitate, redaktionelle Posts | 400 bis 700 ms |
| Aufploppen | Energisch, verspielt, dringlich | Preise, Angebote, Ein-Wort-Haken, Countdowns | 250 bis 400 ms |
| Wischen | Präzise, filmisch, enthüllend | Schlagzeilen, Enthüllungen, Vorher-nachher | 500 bis 800 ms |
| Schreibmaschine | Persönlich, neugierig, im Moment | Fragen, Zitate, Tipps, Blick hinter die Kulissen | 30 bis 60 ms pro Buchstabe |

Startpunkte für jeden Stil. Langsamer wirkt hochwertiger; schneller wirkt dringlicher. Übertreibst du in eine Richtung, hören die Leute auf zu lesen.

## Aufsteigen: der sichere, hochwertige Standard

Aufsteigen bewegt jede Zeile ein kurzes Stück nach oben, während sie einblendet, und lässt sie dann zur Ruhe kommen. Weil die Bewegung klein ist und abbremst, liest das Auge die Wörter fast, sobald sie erscheinen. Es ist der richtige Standard für Marken, die ruhig wirken wollen: Hotels, Studios, Hautpflege, Architektur, Beratungen.

Ein Hochformat-Social-Post, der eine Herbstkollektion ankündigt, mit Eyebrow, Schlagzeile und Detailzeile

Ein Launch-Post, der zu Aufsteigen passt: erst die Eyebrow, dann die Schlagzeile, dann das Detail, jedes einen Beat nach dem vorigen.

Staffle Zeilen um etwa 100 bis 150 Millisekunden, sodass sie kaskadieren. Staffle Wörter nur bei sehr kurzen Zeilen; Buchstaben mit Aufsteigen zu staffeln wirkt fahrig.

## Aufploppen: für kurze Wörter, die landen sollen

Aufploppen skaliert ein Wort aus leicht kleinerer Größe hoch, schießt ein wenig über und kommt zur Ruhe. Es hat Energie und passt zu Wörtern, die treffen sollen: ein Preis, ein Prozentwert, „Ausverkauft“, „Heute Abend“, „Letzter Tag“. Bei langen Sätzen scheitert es, sie wackeln, statt zu landen.

Eine vertikale Sale-Story mit den Wörtern Letzter Tag in großer Schrift und Endet um Mitternacht darunter

Zwei Wörter, die ploppen: kurz, dringlich, in einem Augenblick gelesen.

## Wischen: eine Schlagzeile wie einen Vorhang enthüllen

Wischen deckt eine Zeile von einem Rand zum anderen auf, sodass die Wörter in Leserichtung erscheinen, ohne sich zu bewegen. Es wirkt bedacht und filmisch, und weil die Buchstaben selbst an Ort und Stelle bleiben, ist es einer der am besten lesbaren Auftritte. Nutze es für Schlagzeilen, für eine „Vorher“-Zeile, die weggewischt wird, um ein „Nachher“ zu enthüllen, oder für einen Namen, der am Ende eines Videos enthüllt wird.

Wische in Leserichtung: von links nach rechts im Deutschen und in den meisten europäischen Sprachen. Ein Wischen gegen die Leserichtung wirkt, als würde der Text weggenommen.

## Schreibmaschine: Wörter, die im Moment geschrieben werden

Schreibmaschine enthüllt Buchstaben einzeln. Sie ist langsamer als die anderen drei, und genau das ist der Punkt: Sie lässt eine Zeile persönlich wirken, als schriebe jemand gerade an dich. Nutze sie für Fragen, kurze Zitate, Tipps und Blicke hinter die Kulissen. Halte die Zeile kurz, denn der ganze Satz muss zu Ende getippt sein, bevor man ihn lesen kann, und dann braucht er trotzdem noch ein Halten.

Eine vertikale Story, die fragt Was sollen wir am Freitag backen, mit Platz darunter für eine Umfrage

Eine Frage passt zur Schreibmaschine: Sie wirkt, als hätte ein Mensch sie live für dich getippt. Kurz genug, um in etwa einer Sekunde fertig getippt zu sein.

> **Schreibmaschinen-Rechnung** Bei 40 ms pro Buchstabe braucht eine Zeile mit 30 Buchstaben 1,2 Sekunden zum Tippen, plus etwa zwei Sekunden Halten. Eine Zeile mit fünfzehn Wörtern läuft über drei Sekunden, bevor das Halten überhaupt beginnt, kürze also Wörter oder verteile sie auf mehrere Frames.

## Die richtige Textanimation wählen

1. **Von der Botschaft ausgehen** Ruhige Neuigkeiten steigen auf. Dringende ploppen. Eine Enthüllung wischt. Eine persönliche Notiz wird getippt.
2. **Die Wörter zählen** Ein bis drei Wörter vertragen jeden Stil. Lange Zeilen funktionieren am besten mit Aufsteigen oder Wischen; meide Aufploppen und Schreibmaschine.
3. **Einen Stil pro Post wählen** Gemischte Auftritte in einem Frame wirken, als würde sich eine Vorlage aufspielen. Konsistenz lässt Bewegung nach Marke wirken.
4. **Das Halten festlegen** Wenn das letzte Wort zur Ruhe gekommen ist, halte den Frame lange genug, um zweimal zu lesen. Stories laufen automatisch weiter, das zählt also am meisten bei [Instagram Stories](https://gradiently.design/de/guide/instagram-story-design).
5. **Stumm am Handy ansehen** So sehen es viele deiner Zuschauer. Ist eine Zeile schwer zu erfassen, mach sie langsamer oder streiche Wörter.

### Vermeiden

- Jede Zeile mit einer anderen Animation
- Buchstaben, die sich wiederholt drehen, kippen oder hüpfen
- Text, der sich noch bewegt, wenn die Story weiterspringt
- Aufploppen bei einem ganzen Satz
- Animierter Text über einem unruhigen, schnellen Video

### Besser so

- Ein Stil für den ganzen Post oder die ganze Serie
- Ein Auftritt, dann Ruhe
- Ein klares Halten vor dem nächsten Frame
- Aufploppen bei ein bis drei Wörtern
- Ein ruhiger, langsam bewegter Hintergrund unter den Wörtern

## CSS-Textanimationen zum Kopieren

Auf einer Website brauchen dieselben vier Stile je ein paar Zeilen CSS. Halte sie kurz, lass sie einmal laufen und schalte sie für Menschen ab, die reduzierte Bewegung bevorzugen.

```css
/* Transforms skip plain inline text: use these on block or inline-block elements */
.rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }

.pop { animation: pop 320ms cubic-bezier(0.3, 1.5, 0.6, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

.wipe { animation: wipe 700ms cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.typewriter {
  font-family: ui-monospace, monospace; /* steps() needs equal letter widths */
  white-space: nowrap; overflow: hidden; width: 24ch;
  animation: type 1.2s steps(24) both;
}
@keyframes type { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .pop, .wipe, .typewriter { animation: none; }
}
```

Stimme Breite und Schritte der Schreibmaschine auf die Zeichenzahl deiner Zeile ab. Bei Zeilen in Proportionalschriften enthüllst du stattdessen mit einem kleinen Skript Buchstabe für Buchstabe.

Die Kurven sind so wichtig wie die Dauer; [Easing](https://gradiently.design/de/guide/easing) erklärt, warum Aufsteigen abbremsen und Aufploppen überschießen sollte. Zum weiteren Handwerk bewegter Schrift siehe [kinetische Typografie](https://gradiently.design/de/guide/variable-font-animation).

## Text animieren in Gradiently

Das Studio von Gradiently hat diese vier Textanimationen, Aufsteigen, Aufploppen, Wischen und Schreibmaschine, für jede Textebene, über einem Mark, das sich langsam hinter den Wörtern bewegen kann. Das Mark hält seine ruhigste Fläche unter dem Text, während es sich bewegt, sodass Zeilen während der gesamten Animation lesbar bleiben. Mit Pro exportierst du Stories und Reels als GIF oder, wo der Browser Aufnahme unterstützt, als MP4 oder WebM. [Animierte Instagram-Stories](https://gradiently.design/de/guide/animated-instagram-story) und [GIF oder MP4](https://gradiently.design/de/guide/gif-vs-mp4) helfen dir bei der Formatwahl.

## FAQ

### Welche Textanimation ist die beste für Instagram Stories?

Aufsteigen ist für die meisten Stories der sicherste Standard. Nutze Aufploppen für kurze dringliche Wörter, Wischen für Enthüllungen und Schreibmaschine für Fragen oder persönliche Notizen.

### Wie lange sollte eine Textanimation dauern?

Die meisten Auftritte lesen sich gut zwischen etwa 250 und 800 Millisekunden, gefolgt von einem Halten, das lang genug ist, um die Zeile zweimal zu lesen.

### Wie erzeuge ich einen Schreibmaschinen-Texteffekt?

Enthülle jeweils ein Zeichen mit etwa 30 bis 60 Millisekunden pro Buchstabe. In CSS animierst du die Breite einer Monospace-Zeile mit steps() in Höhe ihrer Zeichenzahl.

### Sollte ich in einem Post verschiedene Textanimationen nutzen?

Meist nicht. Ein Stil über einen Post oder eine ganze Serie wirkt bedacht und nach Marke; gemischte Stile wirken unruhig.