Animations & Transitions

Warum Motion wichtig ist

Motion ist Kommunikation. Ein Button, der sanft in seinen gedrückten Zustand übergeht, ein Panel, das ins Sichtfeld gleitet, und eine Liste, die sich flüssig neu sortiert – all das signalisiert dem Nutzer, was gerade passiert ist. Richtig eingesetzt, lässt Motion ein Interface reaktionsschnell und poliert wirken. Schlecht umgesetzt, lenkt es ab und frustriert.

CSS bietet dir drei Werkzeuge: transitions für Zustandsänderungen, keyframes für Sequenzen und transforms für Bewegungen. Wenn du diese beherrschst, benötigst du für alltägliche Animationen kaum noch JavaScript.

Transitions

Eine Transition interpoliert weich zwischen zwei Zuständen und wird ausgeführt, wenn sich eine Eigenschaft ändert.

/* button.css */
.button {
  background: #2563eb;
  transform: translateZ(0);
  transition: background-color 150ms ease, transform 150ms ease;
}

.button:hover {
  background: #3b82f6;
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

Die Kurzschreibweise umfasst die Eigenschaft, die Dauer, die Timing-Funktion und eine optionale Verzögerung. Transitions benötigen einen Trigger: :hover, :focus, :checked, eine Klassenänderung via JavaScript oder eine Media Query. Halten Sie die Zeitspannen kurz – 150 bis 300 Millisekunden reichen für ein Feedback normalerweise aus.

Transforms

Transforms verändern das Aussehen eines Elements, ohne das Layout anderer Elemente zu beeinflussen, weshalb sie sehr performant zu animieren sind.

/* transform.css */
.move { transform: translateX(24px); }
.grow { transform: scale(1.1); }
.turn { transform: rotate(45deg); }
.skew { transform: skewX(-10deg); }

.combo {
  transform: translateY(-4px) scale(1.02) rotate(-1deg);
}

translate, scale und rotate können auf dem Compositor ausgeführt werden, sodass sie selbst unter Last flüssig bleiben. Wenn stattdessen width, height, top oder margin animiert werden, wird der Browser gezwungen, das Layout in jedem Frame neu zu berechnen.

Keyframes

Für mehrstufige oder loopende Animationen verwenden Sie @keyframes und animation.

/* spinner.css */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 800ms linear infinite;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.enter {
  animation: fade-up 300ms ease-out both;
}

Die animation-Kurzschreibweise legt Name, Dauer, Timing, Verzögerung, Iterationsanzahl, Richtung und den Fill-Mode fest. both ist besonders nützlich für Einblend-Animationen, da es die Zustände des ersten und letzten Keyframes anwendet.

Timing-Funktionen

Die Timing-Funktion steuert das Gefühl der Animation. Easing sorgt dafür, dass Bewegungen natürlich und nicht mechanisch wirken.

/* easing.css */
.linear { transition-timing-function: linear; }
.ease-out { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

• ease-out für Elemente, die in den Bildschirm eintreten, damit sie abbremsen.
• ease-in für Elemente, die den Bildschirm verlassen.
• ease-in-out für Bewegungen zwischen zwei sichtbaren Zuständen.
• steps() für Frame-ähnliche Effekte, wie zum Beispiel Tipp-Animationen oder Sprite-Animationen.

Performance

Die Regel ist simpel: animiere transform und opacity. Diese können vom Compositor verarbeitet werden, wodurch Layout und Paint übersprungen werden. Alles, was die Geometrie verändert, löst ein Layout aus, und alles, was Farben oder Schatten verändert, löst ein Paint aus.

/* hint.css */
.animated {
  will-change: transform;
}

will-change signalisiert, dass ein Element kurz vor einer Animation steht, sodass der Browser es in einen eigenen Layer verschieben kann. Nutze dies sparsam und entferne es, sobald die Animation beendet ist; zu viele promotete Layer verschwenden Arbeitsspeicher. Warum das so ist, erfährst du im Browsers & Rendering Guide.

Barrierefreiheit und reduzierte Bewegung

Einige Nutzer leiden unter Schwindel oder Übelkeit durch Animationen, und das Betriebssystem stellt diese Präferenz zur Verfügung.

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

Eine allgemeine Regel wie diese bietet eine sichere Basis. Für einen differenzierteren Ansatz können große Bewegungen durch ein einfaches Ein- und Ausblenden (Fade) ersetzt werden. Vermitteln Sie niemals Informationen ausschließlich über Bewegungen.

View Transitions

Die View Transitions API ermöglicht native Animationen zwischen zwei DOM-Zuständen oder Seiten.

// navigate.js
document.startViewTransition(() => {
  updateTheDOM();
});

Der Browser erstellt Snapshots des alten und des neuen Zustands und animiert den Übergang dazwischen, wobei du den Effekt über CSS-Pseudo-Elemente steuerst. Sie ist ideal für die Seitennavigation und das Neusortieren von Listen. Biete einen einfachen Fallback für Browser an, die diese Funktion nicht unterstützen.

Patterns

• Hover- und Focus-Feedback. Kurze Transitions für Farben und Transformationen.
• Entrance-Animationen. Einblenden und Einschieben mit both fill mode.
• Staggered Lists. Jedes Element leicht verzögert einblenden, oft über eine CSS-Variable und Inline-Styles gesteuert.
• Skeletons und Spinner. Loopende Keyframes, um Ladevorgänge zu signalisieren.
• Accordions und Drawers. Transition der Höhe via grid-template-rows von 0fr zu 1fr, was eine saubere Animation ermöglicht.

Best Practices

• Animiere transform und opacity; vermeide Layout-Properties.
• Halte die Durations kurz: 150–300ms für Feedback, länger für Akzente.
• Nutze ease-out für Einblendungen und ease-in für Ausblendungen.
• Beachte prefers-reduced-motion.
• Nutze will-change sparsam und räume nach der Animation auf.
• Bevorzuge CSS für einfache Fälle und JavaScript für komplexe Sequenzen.
• Teste auf schwächeren Geräten, nicht nur auf einem schnellen Desktop.

Häufige Fehler

• Animation von width, height oder top, was zu Rucklern (Jank) führt.
• will-change dauerhaft aktiviert lassen und dadurch Speicher verschwenden.
• Lange, langsame Animationen, die das UI träge wirken lassen.
• Ignorieren von reduced-motion-Einstellungen.
• Endlose Animationen, die vom Inhalt ablenken.
• Sich darauf verlassen, dass Animationen essenzielle Informationen vermitteln.

Wie geht es weiter?

CSS-Animationen decken die meisten Anforderungen an Benutzeroberflächen ab. Wenn du Timelines, scrollgesteuertes Storytelling oder präzisere Kontrolle benötigst, schau dir den Guide für fortgeschrittene Animationen an. Erfahre mehr über die Performance-Kosten in Browsers & Rendering, halte deine Seite schnell mit Web Performance oder beginne ganz von vorne mit den CSS-Grundlagen.