Keyframe-Animationen mit CSS & JS.

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

So funktionieren CSS-Keyframes

Eine CSS-Animation besteht aus zwei Teilen: Mit @keyframes legst du fest, was passiert (die Zwischenschritte von 0 % bis 100 %), mit der Eigenschaft animation bestimmst du, wie es abläuft (Dauer, Tempo, Wiederholung).

@keyframes einblenden {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.box {
  animation: einblenden 0.8s ease-out both;
}

CSS-Animationsvarianten mit Klassennamen

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

CSS Animationen Demo

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

/* Effekt oben auswählen – der CSS-Code erscheint hier */

Schreibmaschinen-Effekt mit reinem CSS (Looping)

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

.typing-text-css {
  font-family: monospace, monospace;
  font-size: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #0073aa;
  width: 36ch;
  animation:
    typing 4s steps(36) infinite alternate,
    blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 36ch; }
}
@keyframes blink-caret {
  50% { border-color: transparent; }
}

Anleitung: Schreibmaschinen-Effekt mit reinem CSS

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 width: 36ch an.

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. Tippen & Löschen in einer Animation

• typing animiert die width von 0 auf die volle Breite (36ch) und zeigt den Text „schreibend“ an.
• Mit animation-direction: alternate läuft dieselbe Animation danach rückwärts – der Text wird wieder „gelöscht“. Eine eigene Lösch-Animation brauchst du dafür nicht.

4. Endlosschleife

• infinite wiederholt das Tippen und Löschen ohne Ende.

5. Cursor blinkt unabhängig

• Der blinkende Cursor wird mit einer separaten Animation (blink-caret) über den rechten Rahmen realisiert und läuft dauerhaft.

Erklärung der Animationen und Steuerung

animation:
  typing 4s steps(36) infinite alternate,  /* 1. Text tippen und löschen */
  blink-caret 0.75s step-end infinite;     /* 2. blinkender Cursor */

1. typing 4s steps(36) infinite alternate

• typing = Name der Animation (Text erscheint).
• 4s = Dauer von 4 Sekunden pro Richtung.
• steps(36) = Animation wird in 36 Schritten ausgeführt (passend zu 36 Zeichen).
• infinite = läuft endlos.
• alternate = jeder zweite Durchlauf läuft rückwärts, dadurch wird der Text wieder gelöscht.

2. blink-caret 0.75s step-end infinite

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

Zusammenfassung

• Passe width und steps() an deine Textlänge an.
• Stimme die Dauer 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 – praktisch, wenn die Textlänge variabel ist.

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();