Animation Grundlagen

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.

Steckbrief animation

Syntax: animation-name: <keyframes-name> | none
Initialwert: none
Vererbt: Nein
Animierbar: Nein

Kategorie: Animationen
Werte: 11
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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

11 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.

Wert	Beschreibung	Beispiel
`none`	Keine Animation zugewiesen.	animation-name: none;
`<keyframes-name>`	Name der @keyframes-Regel. Groß-/Kleinschreibung beachten.	animation-name: fade-in;

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.

Wert	Beschreibung	Beispiel
`0s`	Keine Animation sichtbar.	animation-duration: 0s;
`<time>`	Dauer in s oder ms. Muss positiv sein.	animation-duration: 2s;

animation-timing-function

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

Wert	Beschreibung	Beispiel
`ease`	Langsam starten, beschleunigen, langsam enden.	animation-timing-function: ease;
`linear`	Gleichmäßige Geschwindigkeit.	animation-timing-function: linear;
`ease-in`	Langsam starten.	animation-timing-function: ease-in;
`ease-out`	Langsam enden.	animation-timing-function: ease-out;
`ease-in-out`	Langsam starten und enden.	animation-timing-function: ease-in-out;
`cubic-bezier(x1, y1, x2, y2)`	Custom-Kurve. Werte zwischen 0 und 1.	animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
`steps(n, jump-term)`	Springt in n diskreten Schritten. Gut für Sprite-Animationen.	animation-timing-function: steps(4, jump-end);

Beispiele

4 Beispiele

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

Fade-In Animation

@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>

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.

Slide-In von links

@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>

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).

Mehrstufiger Farbwechsel

@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>

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.

Bounce-Effekt

@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

5 Fehler

01 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.

02 @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.

03 from/to und Prozentwerte mischen

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

04 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.

05 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Keine

CSS-Animationen werden komplett entfernt
Outlook

Keine

Kein Support für @keyframes oder animation
Thunderbird

Komplett
Yahoo Mail

Keine

Kein Support für CSS-Animationen

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da