Home » Webdesign lernen » Tutorial: Keyframe-Animationen mit CSS & JavaScript

Keyframe-Animationen mit CSS & JavaScript

In diesem Tutorial lernst du, wie du mit CSS @keyframes komplexe und wiederholte Animationen erstellst.
Hier sind Beispiele mit Erklärungen und praktischer Demo.

CSS-Animationsvarianten mit Klassennamen

.fade-in
Ein Element wird sanft eingeblendet, indem die Transparenz von 0 auf 1 animiert wird.
.flip
Das Element dreht sich um seine Achse (horizontal oder vertikal) – perfekt für Karten-Flips.
.zoom-in / .zoom-out
Sanftes Vergrößern oder Verkleinern eines Elements, um Akzente zu setzen.
.shake
Rasches seitliches Wackeln als Feedback bei Fehlern oder Warnungen.
.pulse
Element pulsiert durch skalierende Vergrößerung und verringerte Deckkraft.
.spin-infinite
Endlose Rotation, z.B. für Lade-Icons oder animierte Logos.
.bounce-in
Element erscheint mit springendem Effekt, erzeugt einen lebendigen Einstieg.
.slide-in-left / .slide-in-right / .slide-in-top / .slide-in-bottom
Elemente gleiten aus den jeweiligen Richtungen in die Ansicht.
.color-change
Sanfter Endlosschleifen-Wechsel von Hintergrund- oder Textfarbe.
.blinking / .flashing
Schnelles Ein- und Ausblenden für Aufmerksamkeitseffekte.
.typing-text
Buchstaben werden nacheinander animiert angezeigt – wie eine Schreibmaschinen-Animation.
.flip-vertical / .flip-horizontal
Drehung um die vertikale bzw. horizontale Achse, oft für Karten oder Elemente mit Vorder- und Rückseite.
.slide-fade-in
Kombiniert ein leichtes Einfahren und Einblenden für sanfte Animationen.
.scale-up / .scale-down
Schnelles Vergrößern oder Verkleinern, um Aufmerksamkeit zu erzeugen.
.roll-in / .roll-out
Element rollt beim Ein- oder Ausblenden herein bzw. heraus – dynamisch und interessant.
.flip-in-x / .flip-in-y
Dreh-Effekte mit zusätzlicher Perspektive für 3D-Anmutung.
.wiggle
Leichtes seitliches und rotierendes Wackeln, für spielerische Effekte.
.shake-vertical
Ähnlich wie .shake, aber vertikal, für andere Feedback-Signale.
.fade-slide-up
Kombiniert Fade mit Hochgleiten, sehr beliebt bei On-Scroll-Animationen.
.zoom-pulse
Kombination aus Vergrößern und Pulsieren für mehr Dynamik.
.heartbeat
Animation, die das Element pulsiert wie ein Herzschlag – sehr beliebt für Buttons und Icons.

CSS Animationen Demo

Animation

Wähle einen Effekt, indem du auf einen der Buttons unten klickst.
Der entsprechende CSS-Code wird angezeigt und ist zum Kopieren bereit.

Schreibmaschinen-Effekt mit reinem CSS (Looping)

Hier tippt ein Text laufend ein und löscht sich wieder, rein mit CSS-Animationen.

CSS Animationen mit Keyframes lernen

.typing-text-css {
  font-family: monospace, monospace;
  font-size: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #0073aa;
  width: 36ch;
  animation:
    animation:
    typing 6s steps(36) forwards,
    blink-caret 0.75s step-end infinite,
    erase 3s steps(36) 10s forwards;
  animation-fill-mode: forwards;
}

@keyframes typing {
  from { width: 0; }
  to { width: 36ch; }
}

@keyframes erase {
  from { width: 36ch; }
  to { width: 0; }
}

@keyframes blink-caret {
  50% { border-color: transparent; }
  100% { border-color: #0073aa; }
}

@keyframes loop {
  from { }
  to { }
}

Anleitung: Schreibmaschinen-Effekt mit reinem CSS (Looping)

Der Schreibmaschinen-Effekt ermöglicht es, Text Zeichen für Zeichen einzublenden und anschließend wieder zu löschen — alles mit CSS-Animationen, ganz ohne JavaScript.

Damit die Animation sauber und flüssig läuft, solltest du folgende Punkte beachten:

1. Textlänge genau angeben

Die CSS-Eigenschaft width wird in Zeichen („ch“) angegeben.
Setze width so, dass es exakt zur Länge deines Textes passt – inklusive Leerzeichen und Satzzeichen.

Beispiel:
Für den Text CSS Animationen mit Keyframes lernen
mit genau 36 Zeichen gibst du an:
width: 36ch

2. Schritte (steps) exakt anpassen

Die Funktion steps(36) sorgt dafür, dass die Animation in 36 Einzel-Schritten abläuft – also jede Phase (ein Buchstabe) getrennt animiert wird.
Stimmen steps() und Textlänge nicht überein, wirkt die Animation ruckelig oder zeigt nicht alle Zeichen.

3. Animationen für Tippen & Löschen definieren

typing: animiert die width von 0 auf die volle Breite (width: 36ch), zeigt den Text „schreibend“ an.
erase: animiert die width von voll zurück auf 0, „löscht“ den Text.

4. Zeitpunkt & Dauer abstimmen

Die Dauer (z. B. 6s) gibt an, wie lange das Tippen/Löschen dauert.
Das Löschen startet nach einer Verzögerung ähnlich der Tipp-Dauer (6.5s), damit der Text eine Weile sichtbar bleibt.

5. Cursor blinkt unabhängig

Der blinkende Cursor wird mit einer separaten Animation (blink-caret) realisiert und läuft dauerhaft.

Erklärung der Animationen und Steuerung


animation:
  typing 6s steps(36) forwards,         /* 1. Text tippen */
  blink-caret 0.95s step-end infinite,  /* 2. blinkender Cursor */
  erase 6s steps(36) 6.5s forwards,     /* 3. Text löschen (mit Verzögerung) */
  loop 0.1s infinite 7.5s;               /* 4. Dummy-Loop (Endlosschleife) */

1. typing 6s steps(36) forwards

typing = Name der ersten Animation (Text erscheint).
6s = Dauer von 6 Sekunden fürs Tippen.
steps(36) = Animation wird in 36 Schritten ausgeführt (passend zu 36 Zeichen).
forwards = Animation stoppt und behält den Endzustand (volle Breite).

2. blink-caret 0.95s step-end infinite

blink-caret = Animation für den blinkenden Cursor.
0.95s = Dauer eines Blinkzyklus (fast 1 Sekunde).
step-end = Cursor blinkt scharf (nicht weich).
infinite = läuft unendlich.

3. erase 6s steps(36) 6.5s forwards

erase = Name der Löschen-Animation.
6s = Löschen dauert 6 Sekunden (gleiche Dauer wie Tippen).
steps(36) = ebenfalls in 36 Schritten (passend zu 36 Zeichen).
6.5s = Verzögerung vor Beginn, das heißt die Löschanimation startet erst 6,5 Sekunden nachdem die Animation insgesamt begonnen hat. So sieht man den Text etwa 0,5 Sekunden vollständig stehen.
forwards = Animation stoppt nach Löschen.

4. loop 0.1s infinite 7.5s

loop = Dummy-Animation ohne Keyframes (leer).
0.1s = extrem kurzer Zyklus.
infinite = Dauerhaft wiederholt.
7.5s = Verzögerung vor dem Start, also startet diese Animation 7,5 Sekunden nach Beginn des Gesamtablaufes.
Diese Kombination sorgt dafür, dass die gesamte Animation (Tippen + Pause + Löschen) in einer Endlosschleife läuft.

Zusammenfassung

Passe width und steps() an deine Textlänge an.
Stimme Tipp- und Löschdauer so ab, dass die Animation natürlich wirkt.
Der blinkende Cursor sollte dauerhaft sichtbar sein.
Diese Animation läuft automatisch im Loop, sobald sie aufgerufen wird.

Schreibmaschinen-Effekt mit JavaScript (Endlosschleife)

Flüssiges Tippen und Löschen in einer Endlosschleife mittels JavaScript.

const text = "CSS Animationen mit Keyframes lernen!";
const typingElement = document.getElementById("typing-js");
let index = 0;
let isDeleting = false;
let speed = 150;
let pause = 1500;

function type() {
  if (!isDeleting) {
    typingElement.textContent = text.substring(0, index + 1);
    index++;
    if (index === text.length) {
      isDeleting = true;
      setTimeout(type, pause);
      return;
    }
    setTimeout(type, speed);
  } else {
    typingElement.textContent = text.substring(0, index - 1);
    index--;
    if (index === 0) {
      isDeleting = false;
      setTimeout(type, speed);
      return;
    }
    setTimeout(type, speed / 2);
  }
}

type();