Animation Erweitert

Zuletzt aktualisiert am 15. Februar 2026

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.

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

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

will-change

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

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

@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

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

Alle erweiterten animation-Eigenschaften werden von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

CSS-Animationen haben sehr eingeschränkten Support in Email-Clients.

Verwandte Eigenschaften