transition

Werte

• Eigenschaft – die übergehen soll: opacity, transform…, all (alle) oder none.
• Dauer – 0.3s oder 300ms; die erste Zeitangabe ist immer die Dauer.
• Zeitfunktion – der Verlauf der Änderung: ease (Standard), linear, ease-in, ease-out, ease-in-out, cubic-bezier(), steps(), linear().
• Verzögerung – die zweite Zeitangabe: transition: opacity 0.3s 1s beginnt nach einer Sekunde. Eine negative Verzögerung startet den Übergang schon mittendrin.
• allow-discrete – erlaubt einen Übergang auch für Eigenschaften, die sich in einem Schritt ändern (display, content-visibility). Die Änderung geschieht dann nicht sofort: in der Regel in der Mitte des Übergangs, bei display: none so, dass das Element während des ganzen Übergangs sichtbar ist.
• mehrere Übergänge – durch Kommas getrennt: transition: opacity 0.3s, transform 0.2s ease-out.

Initialwert: all 0s ease 0s. Vererbt: nein. Gilt für: alle Elemente und die Pseudoelemente ::before und ::after.

Beispiele

Eine Schaltfläche dunkelt beim Überfahren weich ab und hebt sich. Der Übergang steht beim Grundzustand, deshalb wirkt er in beide Richtungen – auch wenn die Maus wieder weggeht:

<button class="button">Senden</button>

.button {
  padding: 10px 20px;
  border: 0;
  border-radius: 6px;
  background: #0088d1;
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s, translate 0.2s;
}
.button:hover {
  background-color: #01579b;
  translate: 0 -2px;
}

In jede Richtung ein anderer Übergang: Die Deklaration in :hover gilt, wenn die Maus hineinfährt, die beim Grundzustand, wenn sie weggeht. Das Untermenü erscheint sofort, verschwindet aber erst nach einer halben Sekunde – der Mauszeiger darf kurz vom Eintrag abrutschen:

<div class="item">Produkte
  <div class="submenu">Fahrräder, Roller, Helme</div>
</div>

.item {
  max-width: 220px;
  padding: 8px;
  background: #eee;
}
.submenu {
  margin-top: 6px;
  padding: 8px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s 0.5s, visibility 0.2s 0.5s;
}
.item:hover .submenu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s, visibility 0.2s;
}

visibility wechselt beim Übergang so, dass das Element die ganze Zeit sichtbar ist: beim Einblenden gleich am Anfang, beim Ausblenden erst am Ende. Ein verborgenes Untermenü lässt sich so nicht versehentlich anklicken, beim Ausblenden reagiert es aber noch auf Klicks.

Worauf Sie achten sollten

• Ein Übergang nur in :hover läuft nur beim Hineinfahren der Maus; beim Weggehen springt das Element zurück. Schreiben Sie ihn zum Grundzustand.
• transition: all animiert auch Änderungen, die Sie nicht beabsichtigt haben (Farben nach dem Wechsel in den dunklen Modus, Maße bei Änderung des Fensters). Sicherer ist es, die Eigenschaften aufzuzählen.
• transform, translate, rotate, scale und opacity gehen am weichsten über: Der Browser berechnet dafür das Layout der Seite nicht neu. Übergänge von width, height, top oder margin sind beim Darstellen teurer.
• Ein Übergang zu height: auto funktioniert nicht, die Höhe ändert sich schlagartig. Weich geht es zwischen zwei Längen (max-height), mit einem Grid (grid-template-rows von 0fr nach 1fr; Chrome ab 107, Firefox ab 66, Safari ab 16) oder mit interpolate-size: allow-keywords, das nur Chrome ab Version 129 unterstützt (Stand Oktober 2026).
• Ein Übergang läuft nicht bei der ersten Darstellung eines Elements oder wenn es aus display: none wechselt – das Element hat keinen vorherigen Wert, von dem es übergehen könnte. Dafür gibt es @starting-style.
• allow-discrete unterstützen Chrome ab 117, Firefox ab 129 und Safari ab 17.4. Laut MDN beherrscht Firefox ein weiches Ausblenden mit display aber noch nicht (Stand Oktober 2026).
• Für Nutzer, die Animationen reduziert haben (prefers-reduced-motion: reduce), Übergänge mit Bewegung verkürzen oder abschalten.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit September 2015, gilt als weithin verfügbar seit März 2018. Ab Version: Chrome 26, Firefox 16, Safari 9. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
cubic-bezier() und steps()
animation
@starting-style
transform
opacity
prefers-reduced-motion
will-change