CSS Animation – @keyframes

CSS-Animationen ermöglichen es, Eigenschaften von HTML-Elementen über einen bestimmten Zeitraum hinweg zu verändern. Sie sind zeitbasiert und erzeugen Bewegung, Übergänge oder visuelle Effekte.

Eine CSS-Animation startet automatisch, sobald das Element geladen ist. Nach dem letzten Keyframe springt das Element – sofern nichts anderes definiert ist – wieder in seinen Ausgangszustand zurück.

Grundlagen

Die Grundlage dafür bildet die Regel @keyframes. Sie beschreibt einzelne Zustände (Schlüsselbilder), die während der Animation durchlaufen werden.

Eine CSS-Animation besteht immer aus zwei klar getrennten Teilen:

• der Beschreibung der Bewegung mit @keyframes
• der Steuerung der Animation über die animation-Eigenschaften

Wichtig:

• Animationen laufen automatisch ab
• Sie benötigen keinen Benutzer-Trigger
• Sie können aus beliebig vielen Zwischenstufen bestehen

Typische Einsatzgebiete:

• Loader & Preloader
• Hinweise und Feedback (z. B. Fehleranimationen)
• UI-Microinteractions
• Dekorative Hintergrund- oder Akzentanimationen

Animation Beispiele

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.anim-fade {
  animation-name: fadeIn;
  animation-duration: 5s;
}

@keyframes slideIn {
  from {
    transform: translateX(-50px);
  }
  to {
    transform: translateX(0);
  }
}

.anim-slide {
  animation-name: slideIn;
  animation-duration: 3s;
}

@keyframes rotateBox {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.anim-rotate {
  animation-name: rotateBox;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0);
  }
}

.anim-bounce {
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes Syntax

Mit @keyframes definierst du, wie sich ein Element während der Animation verändert.
from entspricht dabei 0%, to entspricht 100%.

@keyframes animationName {
  from { /* Startzustand */}
  to { /* Endzustand */ }
}

Komplexere Animationen werden mit Prozentwerten aufgebaut. Du kannst beliebig viele Prozentstufen definieren.

@keyframes animationName {
  0%   { }
  50%  { }
  100% { }
}

Animation auf ein Element anwenden

Damit eine Animation sichtbar wird, muss sie einem Element zugewiesen werden.
Wichtig: Ohne animation-duration wird keine Animation abgespielt.

.box {
  animation-name: fadeIn;
  animation-duration: 5s;
}

Merksatz: @keyframes beschreibt, was passiert – animation beschreibt, wie und wann.

Animation-Eigenschaften

• animation-duration Dauer eines Durchlaufs (Zeitangabe).
• animation-timing-function Zeitlicher Verlauf (Keyword oder cubic-bezier()).
• animation-delay Startverzögerung (Zeitangabe).
• animation-iteration-count Wiederholungen (Zahl oder infinite).
• animation-direction Abspielrichtung (Keyword).
• animation-fill-mode Verhalten vor/nach Ende (Keyword).

animation-duration – Dauer

Legt fest, wie lange eine Animation für einen vollständigen Durchlauf benötigt.

animation-duration: 500ms;
animation-duration: 2s;

animation-timing-function – Geschwindigkeit

Bestimmt, wie sich die Geschwindigkeit der Animation über die Zeit verhält.

animation-timing-function: ease;

• linear – konstante Geschwindigkeit
• ease – langsam → schnell → langsam
• ease-in – langsamer Start
• ease-out – langsames Ende
• cubic-bezier() – individuell definierbar

animation-delay – Verzögerung

Bestimmt, wie lange gewartet wird, bevor die Animation startet.

animation-delay: 1s;

Negative Werte starten die Animation mitten im Ablauf:

animation-delay: -1s;

animation-iteration-count – Wiederholungen

Legt fest, wie oft eine Animation abgespielt wird.

animation-iteration-count: 3;
animation-iteration-count: infinite;

animation-direction – Richtung

Bestimmt, in welcher Reihenfolge die Keyframes abgespielt werden.

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;

animation-fill-mode – Zustand vor & nach der Animation

Definiert, welche Styles ausserhalb der eigentlichen Animation gelten.

animation-fill-mode: forwards;

• none – Standard
• forwards – Endzustand bleibt erhalten
• backwards – Startzustand während Delay
• both

Kurzschreibweise

Alle Animation-Eigenschaften können in einer Zeile zusammengefasst werden.

animation: slideIn 2s ease-in-out 0.5s infinite alternate forwards;

Performance

Für performante Animationen sollten bevorzugt folgende Properties verwendet werden: transform und opacity.

Diese Eigenschaften beeinflussen nicht den Layoutfluss und können von der GPU verarbeitet werden.

Problematisch sind: top, left und width, height

Animation vs Transition

Animation: läuft automatisch, kann mehrere Zustände haben.
Transition: benötigt einen Trigger (z. B. :hover).

Beide Techniken ergänzen sich und werden häufig gemeinsam eingesetzt.

Beispiele

Intensivstation CodePen

See the Pen CSS Animation Blob by Intensivstation (@intensivstation) on CodePen.

Ressourcen

• css3maker
• animatable – Lea Verou