Ausführbare CSS-Docs: CSS Animation

Q: Wie erstellt man eine Animation in CSS?

Leg die Schritte mit @keyframes name { from { ... } to { ... } } fest und wende sie dann mit der Eigenschaft animation und einer Dauer auf ein Element an: animation: name 1s ease-out;. Die Dauer ist Pflicht, weil ihr Standardwert 0s ist.

Q: Wie lasse ich eine CSS-Animation endlos laufen?

Setz animation-iteration-count: infinite oder ergänze infinite in der Kurzschreibweise: animation: spin 1s linear infinite;. Mit alternate läuft sie in jedem Zyklus erst vorwärts und dann rückwärts.

Q: Wie pausiere ich eine CSS-Animation?

Setz animation-play-state: paused am Element, zum Beispiel bei :hover oder über eine Klasse, die JavaScript hinzufügt. Setzt du es wieder auf running, läuft sie da weiter, wo sie angehalten hat.

Q: Wie schalte ich Animationen für Nutzer ab, die reduzierte Bewegung bevorzugen?

Pack die Animation in @media (prefers-reduced-motion: no-preference) { ... } oder entferne sie in @media (prefers-reduced-motion: reduce) { ... }. Die Query folgt der Einstellung „Bewegung reduzieren“ im Betriebssystem des Nutzers.

Eine CSS-Animation in einem Beispiel

Eine Animation hat zwei Teile: @keyframes, das die Schritte beschreibt, und die Eigenschaft animation, die sie mit einer Dauer auf ein Element anwendet. Diese Karte gleitet und blendet sich ein, wenn die Seite lädt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

Bearbeite den Code (oder ändere die Dauer in 2s), und die Vorschau lädt neu, sodass du der Karte noch einmal beim Hereinkommen zusehen kannst. Der Block @media (prefers-reduced-motion: reduce) ersetzt die Keyframes durch ein reines Einblenden, nur für Leser, deren System auf reduzierte Bewegung eingestellt ist.

@keyframes-Syntax

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

from ist dasselbe wie 0% und to dasselbe wie 100%.
Füge so viele Prozentschritte hinzu, wie du brauchst. Schritte mit denselben Styles können sich eine Zeile teilen: 0%, 100% { ... }.
Eine Eigenschaft, die im ersten oder letzten Keyframe fehlt, wird vom eigenen Wert des Elements aus oder zu ihm hin animiert.
Der Name (pulse) ist das, was du an animation-name übergibst. Groß- und Kleinschreibung zählt, und er darf kein Schlüsselwort wie none sein.

Die animation-Eigenschaften

Eigenschaft	Was sie festlegt	Standard
`animation-name`	welche `@keyframes` laufen	`none`
`animation-duration`	Länge eines Zyklus	`0s`
`animation-timing-function`	Geschwindigkeitskurve zwischen den Keyframes	`ease`
`animation-delay`	Wartezeit vor dem ersten Zyklus (negativ startet mittendrin)	`0s`
`animation-iteration-count`	Anzahl der Zyklen oder `infinite`	`1`
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`	`normal`
`animation-fill-mode`	Styles davor und danach: `none`, `forwards`, `backwards`, `both`	`none`
`animation-play-state`	`running` oder `paused`	`running`

Die Kurzschreibweise nimmt sie in fast beliebiger Reihenfolge. Die einzige Regel: Der erste Zeitwert ist die Dauer und der zweite die Verzögerung:

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction und fill-mode live

Wähl eine Richtung, einen Fill-Modus und eine Anzahl und drück dann auf Play. Die Box bewegt sich 200px bis ans Ende der Bahn. Die Anzeige sagt, wo sie nach dem Ende der Animation stehen geblieben ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

Worauf du achten solltest:

fill-mode: none (der Standard): Nach dem letzten Frame springt die Box auf x = 0 zurück und wird wieder bernsteinfarben.
forwards: Sie bleibt beim letzten Keyframe. Mit normal ist das x = 200 und grün; mit reverse endet sie bei x = 0 und blau, weil der zuletzt gespielte Keyframe from war.
alternate mit einer Anzahl von 2 geht hin und zurück, also endet sogar forwards bei x = 0.

Endlosschleifen: eine Ladeanzeige

infinite wiederholt für immer, und animation-delay an jedem Kind versetzt sie, sodass sie sich nacheinander bewegen. Halte Schleifen ruhig: langsam, klein, ohne Blinken.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

role="status" mit einem aria-label sagt Screenreader-Nutzern, dass etwas lädt, was die Punkte allein nicht sagen. Für einen sich drehenden Kreis siehe die Seite zu rotate.

Animationen pausieren und steuern

animation-play-state: paused friert eine Animation an ihrer aktuellen Stelle ein, und running macht von dort weiter. Fahr über den Balken unten, um ihn anzuhalten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

Aus JavaScript liefert element.getAnimations() die laufenden CSS-Animationen, jede mit pause(), play(), cancel() und einer currentTime, die du lesen oder setzen kannst. Das Event animationend feuert, wenn eine nicht endlose Animation fertig ist, und animationiteration am Ende jedes Zyklus.

Reduzierte Bewegung respektieren und nie blinken

Zwei Regeln zur Barrierefreiheit gelten für jede Animation:

Reduzierte Bewegung. Menschen können ihr System um weniger Bewegung bitten, weil ihnen Bewegung schlecht bekommt. Das sicherste Muster ist, Bewegung nur hinzuzufügen, wenn sie nicht um weniger gebeten haben:

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

Kein Blinken. Inhalte, die mehr als dreimal pro Sekunde aufblitzen, können Anfälle auslösen. Vermeide schnelles, kontrastreiches Blinken ganz.

Animationen flüssig halten

Animiere transform und opacity, wann immer es geht. Der Browser kann sie anwenden, ohne die Seite neu anzuordnen, also bleiben sie auch auf langsamen Handys flüssig. Wer width, height, top, left oder margin animiert, lässt das Layout in jedem Frame neu berechnen. Um ein Element zu bewegen, nimm translate() von der Seite zu transform.

Häufige Fehler

Keine Dauer. animation: fade; bewirkt nichts, weil die Standarddauer 0s ist.
Ein Name, der nicht passt. animation-name muss genau dem Namen in @keyframes entsprechen, inklusive Groß- und Kleinschreibung.
Am Ende zurückspringen. Füge forwards (oder both) hinzu, um den letzten Keyframe zu behalten.
Flackern, bevor eine verzögerte Animation startet. Während animation-delay zeigt das Element seine normalen Styles. backwards (oder both) wendet während der Verzögerung den ersten Keyframe an.
Eine Animation neu starten, indem du denselben Wert setzt. Dasselbe animation noch einmal zu setzen, bewirkt nichts. Entferne es, erzwinge einen Reflow (el.offsetWidth) und setz es erneut, so wie es der Play-Button oben macht.
display animieren. Es schaltet sofort um. Animiere stattdessen opacity und transform.

Häufig gestellte Fragen

Wie erstellt man eine Animation in CSS?

Leg die Schritte mit @keyframes name { from { ... } to { ... } } fest und wende sie dann mit der Eigenschaft animation und einer Dauer auf ein Element an: animation: name 1s ease-out;. Die Dauer ist Pflicht, weil ihr Standardwert 0s ist.

Was macht animation-fill-mode: forwards?

Es behält die Styles des letzten Keyframes, nachdem die Animation endet. Ohne es springt das Element auf seine normalen Styles zurück. backwards wendet während der Verzögerung den ersten Keyframe an, und both macht beides.

Wie lasse ich eine CSS-Animation endlos laufen?

Setz animation-iteration-count: infinite oder ergänze infinite in der Kurzschreibweise: animation: spin 1s linear infinite;. Mit alternate läuft sie in jedem Zyklus erst vorwärts und dann rückwärts.

Was ist der Unterschied zwischen CSS-Animation und Transition?

Eine Transition animiert eine Eigenschaft zwischen zwei Werten, wenn sie sich ändert, meist beim Hovern oder bei einem Klassenwechsel. Eine Animation läuft von selbst, sobald sie angewendet wird, kann beliebig viele Keyframes haben und sich wiederholen, umkehren und pausieren.

Wie pausiere ich eine CSS-Animation?

Setz animation-play-state: paused am Element, zum Beispiel bei :hover oder über eine Klasse, die JavaScript hinzufügt. Setzt du es wieder auf running, läuft sie da weiter, wo sie angehalten hat.

Wie schalte ich Animationen für Nutzer ab, die reduzierte Bewegung bevorzugen?

Pack die Animation in @media (prefers-reduced-motion: no-preference) { ... } oder entferne sie in @media (prefers-reduced-motion: reduce) { ... }. Die Query folgt der Einstellung „Bewegung reduzieren“ im Betriebssystem des Nutzers.

Verwandte Konzepte