Animation Erweitert

Im vorherigen Artikel hast du gelernt, wie du mit @keyframes, animation-name und animation-duration Animationen erstellst. Jetzt geht es um die erweiterten Steuerungs-Eigenschaften: Verzögerung, Wiederholung, Richtung, Endposition und Pause/Play. Dazu kommt das animation Shorthand, das alle Werte in einer Zeile zusammenfasst, und will-change für Performance-Optimierung.

Steckbrief animation erweitert

Syntax: animation: <name> <duration> <timing> <delay> <count> <direction> <fill-mode> <play-state>
Initialwert: none 0s ease 0s 1 normal none running
Vererbt: Nein
Animierbar: Nein
Kurzform für: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

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

Grundlagen

Das animation Shorthand fasst alle Animations-Eigenschaften in einer Zeile zusammen. Die Reihenfolge ist wichtig: Der erste <time>-Wert ist immer die duration, der zweite ist die delay. Alle anderen Werte können in beliebiger Reihenfolge stehen.

Mit animation-fill-mode bestimmst du, ob das Element den Animations-Zustand vor oder nach der Animation behält. Das ist besonders wichtig bei Animationen mit Verzögerung oder Animationen, die nur einmal laufen sollen.

Die will-change Eigenschaft gibt dem Browser einen Optimierungs-Hinweis. Der Browser erstellt dann einen eigenen Composite Layer für das Element, was die Animation flüssiger macht. Aber Vorsicht: Zu viele will-change Deklarationen können die Performance verschlechtern, weil sie GPU-Speicher verbrauchen.

Alle Eigenschaften können auch einzeln gesetzt werden, wenn du mehr Kontrolle brauchst oder nur einzelne Werte ändern willst.

Syntax & Werte

19 Werte

animation-delay

Wert	Beschreibung	Beispiel
`0s`	Keine Verzögerung, Animation startet sofort.	animation-delay: 0s;
`<time>`	Wartezeit vor dem Start. Negative Werte starten die Animation mittendrin.	animation-delay: 0.5s;

animation-iteration-count

Wert	Beschreibung	Beispiel
`1`	Animation läuft einmal durch.	animation-iteration-count: 1;
`infinite`	Animation läuft endlos.	animation-iteration-count: infinite;
`<number>`	Beliebige Anzahl an Durchläufen. Auch Dezimalwerte sind erlaubt (z.B. 2.5 für zweieinhalb Durchläufe).	animation-iteration-count: 3;

animation-direction

Wert	Beschreibung	Beispiel
`normal`	Animation läuft vorwärts von 0% zu 100%.	animation-direction: normal;
`reverse`	Animation läuft rückwärts von 100% zu 0%.	animation-direction: reverse;
`alternate`	Ungerade Durchläufe vorwärts, gerade Durchläufe rückwärts.	animation-direction: alternate;
`alternate-reverse`	Ungerade Durchläufe rückwärts, gerade Durchläufe vorwärts.	animation-direction: alternate-reverse;

animation-fill-mode

Wert	Beschreibung	Beispiel
`none`	Element kehrt nach der Animation zum Ursprungsstil zurück.	animation-fill-mode: none;
`forwards`	Element behält den Endzustand des letzten Keyframes.	animation-fill-mode: forwards;
`backwards`	Element nimmt den Startzustand schon während der Verzögerung an.	animation-fill-mode: backwards;
`both`	Kombination aus forwards und backwards.	animation-fill-mode: both;

animation-play-state

Wert	Beschreibung	Beispiel
`running`	Animation läuft.	animation-play-state: running;
`paused`	Animation ist pausiert. Kann per JavaScript oder CSS umgeschaltet werden.	animation-play-state: paused;

will-change

Wert	Beschreibung	Beispiel
`auto`	Browser entscheidet selbst über Optimierungen.	will-change: auto;
`transform`	Browser optimiert für transform-Änderungen.	will-change: transform;
`opacity`	Browser optimiert für opacity-Änderungen.	will-change: opacity;
`<property>`	Browser optimiert für die genannte Eigenschaft.	will-change: left, top;

Setze will-change nur auf Elemente, die tatsächlich animiert werden, und entferne es nach der Animation wenn möglich. Zu viele will-change Deklarationen verbrauchen GPU-Speicher.

Beispiele

5 Beispiele

Endlos drehender Spinner

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

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #1a56db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

<div class="spin-demo">
<div class="spinner"></div>
<span>Lädt...</span>
</div>

animation-direction Vergleich

@keyframes slide {
  0% {
    transform: translateY(0);
    background: #1a56db;
  }
  100% {
    transform: translateY(-30px);
    background: #7c3aed;
  }
}

.d-normal { animation-direction: normal; }
.d-reverse { animation-direction: reverse; }
.d-alternate { animation-direction: alternate; }
.d-alt-rev { animation-direction: alternate-reverse; }

<div class="dir-demo">
<div class="dir-box d-normal">normal</div>
<div class="dir-box d-reverse">reverse</div>
<div class="dir-box d-alternate">alternate</div>
<div class="dir-box d-alt-rev">alt-reverse</div>
</div>

animation-fill-mode Vergleich

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

.no-fill {
  background: #dc2626;
  animation: appear 0.8s ease 1s;
  animation-fill-mode: none;
}

.with-fill {
  background: #059669;
  animation: appear 0.8s ease 1s;
  animation-fill-mode: both;
}

<div class="fill-demo">
<div class="fill-box no-fill">fill-mode: none</div>
<div class="fill-box with-fill">fill-mode: both</div>
</div>

Pause/Play mit Checkbox

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

.pause-target {
  animation: rotate 3s linear infinite;
}

#pause-check:checked ~ .pause-target {
  animation-play-state: paused;
}

<div class="pause-demo">
<input type="checkbox" id="pause-check" class="pause-toggle">
<label for="pause-check" class="pause-label"> Pausieren</label>
<div class="pause-target">&#9654;</div>
</div>

Einzelwerte vs. Shorthand

/* Shorthand-Reihenfolge: */
animation: name duration timing delay count direction fill-mode play-state;

/* Beispiel: */
animation: pulse 2s ease-in-out 0s infinite alternate;

/* Der erste <time>-Wert = duration */
/* Der zweite <time>-Wert = delay */

<div class="short-demo">
<div class="short-box long-form">Einzel-<br>werte</div>
<div class="short-box short-form">Short-<br>hand</div>
</div>

Barrierefreiheit

Endlos-Animationen brauchen eine Stopp-Möglichkeit. WCAG 2.2.2 fordert, dass Nutzer bewegte Inhalte pausieren, stoppen oder ausblenden können. Biete entweder einen Button oder nutze prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

will-change und Barrierefreiheit hängen zusammen: Exzessiver GPU-Layer-Verbrauch durch will-change kann auf leistungsschwachen Geräten zu Rucklern führen. Besonders auf älteren Mobilgeräten oder Assistive-Technology-Geräten kann das problematisch sein. Setze will-change nur gezielt und entferne es nach der Animation.

Häufige Fehler

5 Fehler

01 Shorthand: Zweiter <time>-Wert wird als delay interpretiert

Der erste <time>-Wert ist immer die duration, der zweite ist die delay. Wenn du animation: slide 1s 2s schreibst, dauert die Animation 1 Sekunde und startet nach 2 Sekunden Verzögerung.

02 animation-fill-mode: forwards vergessen

Ohne forwards springt das Element nach der Animation zurück zum Ausgangszustand. Das ist besonders ärgerlich bei Animationen, die nur einmal laufen sollen.

03 will-change auf allen Elementen setzen

Das verbraucht GPU-Speicher und kann die Performance verschlechtern statt verbessern. Setze will-change nur auf Elemente, die tatsächlich animiert werden.

04 animation-play-state: paused initial setzen und per JS umschalten vergessen

Wenn du die Animation pausiert startest, musst du sie auch irgendwann auf running setzen, sonst steht sie still.

05 infinite mit animation-fill-mode: forwards kombinieren

forwards hat bei Endlos-Animationen keinen Effekt, weil die Animation nie endet. Das ist nicht falsch, aber sinnlos.

Browser-Kompatibilität

5 von 5

Alle erweiterten animation-Eigenschaften 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.

Apple Mail

Komplett
Gmail

Keine

CSS-Animationen werden komplett entfernt
Outlook

Keine

Kein Support für animation oder @keyframes
Thunderbird

Komplett
Yahoo Mail

Keine

Kein Support für CSS-Animationen

Steckbrief animation erweitert

Syntax: animation: <name> <duration> <timing> <delay> <count> <direction> <fill-mode> <play-state>
Initialwert: none 0s ease 0s 1 normal none running
Vererbt: Nein
Animierbar: Nein
Kurzform für: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

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

Inhalt

7 Kapitel

Verwandt

animation transition opacity

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

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