Animation Grundlagen

Zuletzt aktualisiert am 15. Februar 2026

CSS-Animationen erlauben mehrstufige Animationen, die automatisch laufen - ohne Trigger wie Hover. Mit @keyframes definierst du die einzelnen Schritte, und mit animation-name, animation-duration und animation-timing-function steuerst du die Wiedergabe. Der große Unterschied zu Transitions: Animationen können beliebig viele Zwischenschritte haben und brauchen keinen Zustandswechsel als Auslöser.

Grundlagen

CSS-Animationen basieren auf @keyframes-Regeln, die die einzelnen Schritte einer Animation definieren. Du kannst entweder mit den Schlüsselwörtern from (Anfang) und to (Ende) arbeiten oder mit Prozentwerten von 0% bis 100% beliebig viele Zwischenschritte festlegen.

Der große Unterschied zu Transitions: Animationen laufen automatisch ab, sobald sie einem Element zugewiesen werden. Sie brauchen keinen Zustandswechsel wie :hover oder .active als Auslöser. Außerdem können sie beliebig oft wiederholt werden und mehrere Zwischenschritte haben.

Jede Animation braucht mindestens drei Dinge: eine @keyframes-Regel mit Namen, die Eigenschaft animation-name (verweist auf die @keyframes-Regel) und animation-duration (wie lange die Animation dauert). Ohne animation-duration ist die Dauer 0s - die Animation ist sofort fertig und unsichtbar.

Der Browser interpoliert zwischen den Keyframes automatisch, genau wie bei Transitions. Du gibst nur die Eckpunkte vor, den Rest erledigt der Browser.

Performance-Tipp: Animiere bevorzugt transform und opacity - diese Properties werden GPU-beschleunigt. Vermeide das Animieren von Layout-Properties wie width, height oder margin, da diese das gesamte Layout neu berechnen müssen.

Syntax & Werte

@keyframes

Die @keyframes-Regel definiert die Schritte einer Animation. Du gibst der Regel einen Namen und legst fest, welche CSS-Properties sich zu welchem Zeitpunkt ändern sollen:

@keyframes meine-animation {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Oder mit Prozent-Schritten */
@keyframes farb-wechsel {
  0%   { background: #1a56db; }
  50%  { background: #7c3aed; }
  100% { background: #dc2626; }
}

Du kannst mehrere Properties gleichzeitig animieren und beliebig viele Keyframes definieren. Die Prozentwerte geben an, zu welchem Zeitpunkt der Animation welcher Zustand erreicht sein soll.

animation-name

Die animation-name-Eigenschaft verbindet ein Element mit einer @keyframes-Regel. Der Name muss exakt übereinstimmen - Groß- und Kleinschreibung wird beachtet.

animation-duration

Die animation-duration-Eigenschaft legt fest, wie lange eine Animation dauern soll. Ohne expliziten Wert ist die Dauer 0s - die Animation läuft sofort durch und ist nicht sichtbar.

animation-timing-function

Die animation-timing-function-Eigenschaft steuert, wie die Animation zwischen den Keyframes verläuft. Sie funktioniert identisch zur transition-timing-function.

Beispiele

Einfaches Einblenden (Fade-In)

Eine klassische Fade-In-Animation, die ein Element sanft einblendet. Die Animation läuft einmal über 2 Sekunden mit der Standard-Timing-Function ease.

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation: fade-in 2s ease;
}

<div class="fade-demo">
<div class="fade-box">Ich blende sanft ein</div>
</div>

Einfahren von links (Slide-In)

Eine Slide-In-Animation kombiniert transform: translateX() mit opacity, um ein Element von links einfahren zu lassen. Die ease-out-Kurve sorgt dafür, dass die Animation sanft abbremst.

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slide-in 1s ease-out;
}

<div class="slide-demo">
<div class="slide-box">Von links eingefahren</div>
</div>

Farbwechsel-Animation (Prozent-Keyframes)

Mit Prozent-Keyframes kannst du mehrere Zwischenschritte definieren. Diese Animation wechselt durch vier verschiedene Farben und läuft endlos (infinite wird im nächsten Artikel behandelt, aber hier zur Demonstration).

@keyframes farb-wechsel {
  0%   { background: #1a56db; }
  33%  { background: #7c3aed; }
  66%  { background: #dc2626; }
  100% { background: #059669; }
}

.element {
  animation: farb-wechsel 4s ease infinite;
}

<div class="color-demo">
<div class="color-box">Farbwechsel mit Prozent-Keyframes</div>
</div>

Bounce-Effekt mit custom Timing

Eine Bounce-Animation mit mehreren Keyframes und einer custom cubic-bezier-Kurve. Die Ball-Bewegung wirkt natürlich, weil die Timing-Function den physikalischen Eigenschaften eines springenden Balls nachempfunden ist.

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-20px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-10px); }
}

.ball {
  animation: bounce 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

<div class="bounce-demo">
<div class="bounce-box"></div>
</div>

Barrierefreiheit

prefers-reduced-motion ist Pflicht: Animationen können bei Nutzern mit vestibulären Störungen Übelkeit, Schwindel oder Desorientierung auslösen. Die WCAG 2.1 fordert unter Success Criterion 2.3.3, dass Animationen von Bewegung deaktiviert werden können. Das Media Query prefers-reduced-motion erkennt, wenn Nutzer in ihren Systemeinstellungen “Bewegung reduzieren” aktiviert haben. Jede Animation muss über dieses Media Query deaktivierbar sein:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

Keine blinkenden Inhalte: WCAG 2.3.1 fordert, dass Inhalte nicht mehr als 3 Mal pro Sekunde blinken oder aufflackern. Animationen mit schnellen Farbwechseln, Opacity-Flackern oder Hell-Dunkel-Übergängen können epileptische Anfälle auslösen. Vermeide Animationen, die schnell zwischen kontrastreichen Zuständen wechseln. Wenn du mit Opacity arbeitest, achte darauf, dass die Änderungen sanft und langsam erfolgen.

Animationen nicht für kritische Inhalte nutzen: Informationen, die nur während einer Animation sichtbar sind, können verpasst werden. Nutzer mit kognitiven Einschränkungen haben möglicherweise Schwierigkeiten, schnell bewegende Inhalte zu erfassen. Kritische Informationen müssen ohne Animation zugänglich sein. Nutze Animationen nur als visuelle Verstärkung, nicht als einzige Informationsquelle.

Häufige Fehler

animation-duration vergessen: Der häufigste Fehler - ohne explizite Dauer ist der Standardwert 0s, die Animation ist sofort fertig und unsichtbar. Du siehst nichts, obwohl alles korrekt geschrieben ist. Gib immer eine Dauer an.

@keyframes-Name und animation-name stimmen nicht überein: Die Namen müssen exakt übereinstimmen, inklusive Groß- und Kleinschreibung. @keyframes fadeIn und animation-name: fadein funktioniert nicht. Wenn deine Animation nicht läuft, prüfe als erstes die Namen.

from/to und Prozentwerte mischen: Das ist technisch erlaubt (from entspricht 0%, to entspricht 100%), aber verwirrend. Bleib bei einer Schreibweise pro @keyframes-Regel.

Element hat display: none: Wenn ein Element display: none hat, kann keine Animation darauf laufen. Nutze stattdessen opacity: 0 und visibility: hidden, wenn du ein Element verstecken willst, aber animieren möchtest.

Kein animation-fill-mode: forwards: Nach dem Ende der Animation springt das Element zurück zum Anfangszustand. Wenn du willst, dass das Element im End-Zustand bleibt, brauchst du animation-fill-mode: forwards. Das wird im nächsten Artikel behandelt.

Browser-Kompatibilität

CSS-Animationen und @keyframes werden von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

CSS-Animationen haben sehr eingeschränkten Support in Email-Clients. Die meisten Clients entfernen @keyframes und animation-Properties.

Verwandte Eigenschaften