Ausführbare CSS-Docs: CSS Transition

Q: In welcher Reihenfolge stehen die Werte in der Kurzschreibweise transition?

transition: property duration timing-function delay;, zum Beispiel transition: opacity 0.3s ease-in 0.1s;. Die einzige strikte Regel: Der erste Zeitwert ist die Dauer, der zweite die Verzögerung. Mehrere Transitions trennst du durch Kommas.

Q: Warum funktioniert meine CSS-Transition nicht?

Häufige Ursachen: Die transition steht nur in der :hover-Regel (also wird sie beim Hineinfahren animiert und springt dann zurück), die Eigenschaft lässt sich nicht animieren (display oder height zu auto), die Dauer hat keine Einheit (0.3 statt 0.3s) oder der Wert ändert sich im selben Moment, in dem das Element zur Seite hinzugefügt wird.

Q: Lässt sich height: auto per Transition animieren?

Nicht in jedem Browser mit einer einfachen height-Transition: Die Interpolation zu auto braucht die neuere Eigenschaft interpolate-size, die noch nicht überall unterstützt wird. Übliche Workarounds sind, grid-template-rows an einem Grid-Wrapper von 0fr zu 1fr zu animieren oder max-height auf einen Wert größer als der Inhalt.

Eine Transition in einem Beispiel

Eine Transition sagt dem Browser: Wenn sich diese Eigenschaft ändert, animiere sie über diese Zeitspanne, statt sofort umzuschalten. Setz sie in die normale Regel des Elements, nicht nur in :hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

Fahr über den ersten Button: Seine Farbe geht in Grün über, und er steigt in 0,4 Sekunden um 4px, und wenn du den Zeiger wegbewegst, läuft dieselbe Transition zurück. Der zweite Button hat transition: none und schaltet sofort um. Tastaturnutzer bekommen denselben Effekt über :focus-visible.

Die Kurzschreibweise transition

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

Einzeleigenschaft	Was sie festlegt	Standard
`transition-property`	welche Eigenschaften animiert werden (`all` oder eine Liste)	`all`
`transition-duration`	wie lange, in `s` oder `ms`	`0s`
`transition-timing-function`	die Geschwindigkeitskurve	`ease`
`transition-delay`	Wartezeit vor dem Start (darf negativ sein)	`0s`

Der Standard für die Dauer ist 0s, und deshalb wird nichts animiert, bis du eine setzt. In der Kurzschreibweise ist die erste Zeit immer die Dauer und die zweite die Verzögerung. Für unterschiedliche Einstellungen pro Eigenschaft trennst du sie durch Kommas:

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

Timing-Funktionen nebeneinander

Die Timing-Funktion entscheidet, wie sich die Geschwindigkeit während der Transition ändert. Drück auf Play, und alle sieben Balken legen dieselbe Strecke in denselben 1,5 Sekunden zurück:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

Timing-Funktion	Fühlt sich an wie
`linear`	konstante Geschwindigkeit, mechanisch
`ease` (Standard)	schneller Start, sanfter Halt
`ease-in`	langsamer Start, schnelles Ende: gut für Dinge, die verschwinden
`ease-out`	schneller Start, langsames Ende: gut für Dinge, die erscheinen
`ease-in-out`	langsam an beiden Enden
`cubic-bezier(x1, y1, x2, y2)`	deine eigene Kurve; ein y über 1 schießt über das Ziel hinaus und pendelt sich ein
`steps(n)`	springt in n gleichen Schritten, ohne Zwischenbilder

Für Hover-Effekte und Menüs fühlt sich ease-out mit einer Dauer zwischen 150ms und 300ms reaktionsschnell an.

Was sich animieren lässt

Eigenschaften mit Zwischenwerten lassen sich animieren: Farben, Längen (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. Eigenschaften, die zwischen Schlüsselwörtern springen, wie display oder font-family, schalten sofort um.

height: auto erwischt die meisten: Ein Panel, das sich von height: 0 zu height: auto öffnet, wird standardmäßig nicht animiert, weil der Browser die Werte zwischen 0 und „auto“ nicht berechnet. Ein zuverlässiger Workaround ist ein Grid-Wrapper, dessen einzige Zeile von 0fr zu 1fr geht:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

aria-expanded sagt Screenreader-Nutzern, ob das Panel offen ist, was die Animation allein nicht tut.

Code ausführen, wenn eine Transition endet

Das Event transitionend feuert, wenn eine Transition fertig ist, einmal pro Eigenschaft. Nutze es, um nach der Bewegung etwas zu tun, etwa den Fokus zu verschieben oder ein Element zu entfernen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

Reduzierte Bewegung respektieren

Manche Menschen schalten in den Systemeinstellungen „Bewegung reduzieren“ ein, weil Bewegung auf dem Bildschirm ihnen schwindlig macht oder sie ablenkt. Behalte Farb- und Opacity-Übergänge und verzichte mit einer Media Query auf große Bewegungen:

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

Transitions flüssig halten

transform und opacity sind die günstigsten Eigenschaften zum Animieren: Der Browser kann ein Element verschieben und ausblenden, ohne das Layout neu zu berechnen. Eine Transition auf width, height, top oder margin zwingt den Browser, die Seite in jedem Frame neu anzuordnen, was auf langsamen Handys ruckeln kann. Um etwas zu bewegen, nimm lieber transform: translate() als left oder margin. Die Seite zu transform behandelt die Funktionen.

Häufige Fehler

transition nur in der :hover-Regel. Der Effekt wird beim Hineinfahren animiert, springt beim Ende des Hovers aber zurück. Setz transition in die Basisregel.
Eine Dauer ohne Einheit. transition: opacity 300 ist ungültig. Schreib 300ms oder 0.3s.
transition: all. Es animiert jede Eigenschaft, die sich ändert, auch solche, die du gar nicht animieren wolltest, und kann Layoutänderungen träge machen. Liste die Eigenschaften auf.
Erwarten, dass display: none ausblendet. display schaltet sofort um. Blende stattdessen opacity aus (und setz visibility: hidden, wenn das Ausblenden endet).
Eine Transition zu height: auto. Sie springt. Nimm die Technik mit grid-template-rows von oben.
Lange Dauern bei kleinen Interaktionen. Alles über etwa 400ms an einem Button oder Menü fühlt sich langsam an.

Häufig gestellte Fragen

Wie funktionieren CSS-Transitions?

Du legst an einem Element fest, welche Eigenschaften wie lange animiert werden sollen, zum Beispiel transition: background-color 0.3s ease;. Ändert sich der Wert dieser Eigenschaft (über :hover, eine Klasse oder JavaScript), animiert der Browser vom alten zum neuen Wert, statt sofort umzuschalten.

In welcher Reihenfolge stehen die Werte in der Kurzschreibweise transition?

transition: property duration timing-function delay;, zum Beispiel transition: opacity 0.3s ease-in 0.1s;. Die einzige strikte Regel: Der erste Zeitwert ist die Dauer, der zweite die Verzögerung. Mehrere Transitions trennst du durch Kommas.

Warum funktioniert meine CSS-Transition nicht?

Häufige Ursachen: Die transition steht nur in der :hover-Regel (also wird sie beim Hineinfahren animiert und springt dann zurück), die Eigenschaft lässt sich nicht animieren (display oder height zu auto), die Dauer hat keine Einheit (0.3 statt 0.3s) oder der Wert ändert sich im selben Moment, in dem das Element zur Seite hinzugefügt wird.

Lässt sich height: auto per Transition animieren?

Nicht in jedem Browser mit einer einfachen height-Transition: Die Interpolation zu auto braucht die neuere Eigenschaft interpolate-size, die noch nicht überall unterstützt wird. Übliche Workarounds sind, grid-template-rows an einem Grid-Wrapper von 0fr zu 1fr zu animieren oder max-height auf einen Wert größer als der Inhalt.

Was ist der Unterschied zwischen transition und animation in CSS?

Eine Transition läuft einmal zwischen zwei Werten, wenn sich eine Eigenschaft ändert. Eine Animation nutzt @keyframes, kann viele Schritte haben, startet beim Laden der Seite von selbst und kann sich wiederholen oder endlos laufen.

Verwandte Konzepte