Übergänge, Transformationen und Animationen

Gute Bewegung erklärt: Etwas erscheint, ändert sich, verschwindet. Schlechte Bewegung lenkt ab. CSS bringt alles Nötige mit, und die wichtigste Regel steht am Ende des Kapitels.

Was du am Ende kannst

• Zustandswechsel mit transition weich machen
• Elemente mit transform bewegen
• eigene Animationen mit @keyframes schreiben
• prefers-reduced-motion beachten

Live-Coding zum Mitmachen

⤓ demo-19-bewegung.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: index.html, stil.css

Transitions

Eine transition macht den Wechsel zwischen zwei Zuständen weich.

Fahre über die Knöpfe

.knopf { padding: 0.5rem 1rem; border: 0; border-radius: 0.25rem; background: #4338ca; color: #fff; font: inherit; cursor: pointer; transition: background-color 200ms ease, transform 200ms ease; }
.knopf:hover { background: #be185d; transform: translateY(-3px); }
.hart { transition: none; margin-inline-start: 0.5rem; }

<button class="knopf">Mit Übergang</button>
<button class="knopf hart">Ohne Übergang</button>

.knopf {
  transition: background-color 200ms ease;
  /*          Eigenschaft      Dauer  Verlauf */
}

• Die transition gehört an den Grundzustand, sonst wirkt sie nur in eine Richtung.
• Nenne die Eigenschaften einzeln. transition: all animiert auch, was du nicht meinst.
• Kurz bleiben: 100 bis 300 Millisekunden fühlen sich flott an.

Transforms

transform verändert die Darstellung, ohne das Layout zu berühren. Die Nachbarn bleiben, wo sie sind.

Die vier Grundfunktionen

<div class="reihe">
  <div class="box a">translate</div>
  <div class="box b">rotate</div>
  <div class="box c">scale</div>
  <div class="box d">skew</div>
</div>

Bevorzuge für Bewegung transform und opacity. Beide kann der Browser ohne neue Layoutberechnung darstellen, sie laufen daher flüssig. width oder top zu animieren wirkt leicht ruckelig.

Animationen

@keyframes beschreibt einen Ablauf, und animation wendet ihn an. Anders als eine Transition braucht das keinen Zustandswechsel.

Eine Animation in Dauerschleife

@keyframes schweben {
  from { transform: translateY(0); }
  to { transform: translateY(-0.5rem); }
}
.marke { display: inline-block; margin-top: 1rem; padding: 0.25rem 0.75rem; background: #4338ca; color: #fff; animation: schweben 600ms ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .marke { animation: none; }
}

<p class="marke">Ich schwebe, außer du möchtest weniger Bewegung</p>

Teil von animation	Beispiel
Name	schweben
Dauer	600ms
Verlauf	ease-in-out
Wiederholungen	3, infinite
Richtung	alternate läuft vor und zurück
Füllmodus	forwards behält den Endzustand, backwards den Startzustand während der Wartezeit
Verzögerung	200ms

Weniger Bewegung

Bewegung kann Menschen mit Gleichgewichtsstörungen körperlich krank machen. Im Betriebssystem lässt sich deshalb „Weniger Bewegung“ einstellen, und CSS kann es abfragen.

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

Das ist einer der wenigen guten Einsätze von !important. Zum Testen gibt es in den DevTools unter Rendering eine Emulation.

Ausblick

Scroll-gesteuerte Animationen (animation-timeline: scroll()) und Übergänge zwischen Ansichten (view-transition) sind noch nicht Widely available. Setze sie nur als Verbesserung innerhalb von @supports ein.

Live-Coding: Das Brett reagiert

stil.css

/* Übergänge nur für das, was sich wirklich ändert */
.knopf,
.seitenleiste a {
  transition: background-color 150ms ease;
}

.karte {
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.karte:hover {
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.12), 0 12px 24px rgb(0 0 0 / 0.14);
  transform: translateY(-3px);
}

.knopf:active {
  transform: scale(0.97);
}

/* Die Marke „Neu“ pulsiert dreimal, dann ist Ruhe */
@keyframes pulsieren {
  50% {
    transform: scale(1.15);
  }
}

.neu {
  animation: pulsieren 800ms ease-in-out 3;
}

/* Wer in den Systemeinstellungen weniger Bewegung wünscht, bekommt sie auch */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Übung

Starter für die Übung

⤓ uebung-19-bewegung.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: index.html, stil.css, uebung.css

Schreibe deine Regeln in uebung.css.

Stufe 1: Reiter

Die Linie unter einem Reiter färbt sich weich ein.

Stufe 2: Reaktion

Fährt man über eine Spalte, rückt ihr Titel ein Stück nach rechts, und zwar weich und mit transform.

Stufe 3: Ladeanzeige

Im Kopf steht ein leerer .laden-Bereich. Mache daraus einen drehenden Kreis: ein Rahmen, dessen obere Kante eine andere Farbe hat. Stelle die Drehung bei prefers-reduced-motion ab.

Für Schnelle

Die Karten erscheinen beim Laden nacheinander von unten. Du brauchst @keyframes, animation-delay und :nth-child.