transition

Zuletzt aktualisiert am 15. Februar 2026

CSS-Transitions machen Zustandswechsel sanft und flüssig. Statt einem harten Sprung von Farbe A zu Farbe B interpoliert der Browser die Werte über eine definierte Zeit. Die transition-Eigenschaft ist eine Kurzschreibweise für vier Untereigenschaften: transition-property (was wird animiert), transition-duration (wie lange dauert es), transition-timing-function (Beschleunigungskurve) und transition-delay (Wartezeit vor Start). Transitions brauchen immer einen Trigger wie Hover, Focus oder eine Klassen-Änderung via JavaScript, sie laufen nicht automatisch beim Laden der Seite.

Grundlagen

Transitions brauchen einen Trigger wie :hover, :focus oder eine Klassen-Änderung per JavaScript, sie laufen nicht automatisch. Nur animierbare Properties funktionieren: Farben, Längen, Transformationen und Opazität lassen sich interpolieren. Properties wie display, font-family oder visibility springen hart um, weil der Browser keine Zwischenwerte berechnen kann.

Performance-Tipp: transform und opacity sind GPU-beschleunigt und butterweich. Layout-Änderungen wie width, height oder margin lösen Reflows aus und können ruckeln, besonders bei vielen Elementen. Wenn du kannst, animiere mit transform: scale() statt width.

Wichtig: Setze die Transition auf dem Ausgangszustand, nicht auf :hover. Sonst funktioniert die Rück-Animation nicht, weil die Transition-Definition verschwindet, sobald der Hover endet. Mit transition auf dem Basis-Element animiert der Browser sowohl hin als auch zurück.

Syntax & Werte

transition-property

transition-duration

transition-timing-function

transition-delay

Beispiele

Einfacher Button-Hover

Ein Button ändert Hintergrundfarbe und Textfarbe beim Hover. Die Transition dauert 0.3 Sekunden mit ease-Beschleunigung.

.btn {
  background: #1a56db;
  color: white;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #7c3aed;
  color: #f3e8ff;
}

<div class="demo">
<button class="btn">Hover mich</button>
<button class="btn">Noch einer</button>
</div>

Timing-Funktionen im Vergleich

Fünf Boxen mit unterschiedlichen Timing-Funktionen bewegen sich beim Hover nach rechts. So siehst du direkt, wie sich ease, linear, ease-in, ease-out und ease-in-out unterscheiden.

.timing-box {
  transition: transform 1.5s;
}

.timing-demo:hover .t-ease {
  transform: translateX(120px);
  transition-timing-function: ease;
}

.timing-demo:hover .t-linear {
  transform: translateX(120px);
  transition-timing-function: linear;
}

<div class="timing-demo">
<p style="margin:0 0 8px;color:#64748b">Hover über den gesamten Bereich:</p>
<div class="timing-track"><div class="timing-box t-ease">ease</div></div>
<div class="timing-track"><div class="timing-box t-linear">linear</div></div>
<div class="timing-track"><div class="timing-box t-ease-in">ease-in</div></div>
<div class="timing-track"><div class="timing-box t-ease-out">ease-out</div></div>
<div class="timing-track"><div class="timing-box t-ease-in-out">ease-in-out</div></div>
</div>

Mehrere Transitions

Eine Card hebt sich beim Hover an, bekommt einen Schatten und ändert die Hintergrundfarbe. Jede Property hat ihre eigene Transition-Dauer und Delay für einen mehrschichtigen Effekt.

.demo-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease 0.05s,
    background-color 0.3s ease;
}

.demo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  background: white;
}

<div class="card-demo">
<div class="demo-card">
  <h3>Projekt-Card</h3>
  <p>Hover für einen sanften Lift-Effekt mit mehreren Transitions.</p>
</div>
</div>

Staffelung mit transition-delay

Vier Navigations-Items blenden nacheinander ein, wenn du über den Container hoverst. Jedes hat ein größeres transition-delay für einen gestaffelten Effekt.

.nav-item {
  transform: translateX(-20px);
  opacity: 0.4;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.stagger-nav:hover .nav-item {
  transform: translateX(0);
  opacity: 1;
}

.nav-item:nth-child(1) { transition-delay: 0s; }
.nav-item:nth-child(2) { transition-delay: 0.1s; }
.nav-item:nth-child(3) { transition-delay: 0.2s; }
.nav-item:nth-child(4) { transition-delay: 0.3s; }

<div class="stagger-nav">
<p>Hover für gestaffeltes Einblenden:</p>
<div class="nav-item d0">Home</div>
<div class="nav-item d1">Blog</div>
<div class="nav-item d2">Docs</div>
<div class="nav-item d3">Kontakt</div>
</div>

Barrierefreiheit

Nutzer mit vestibulären Störungen oder Epilepsie können durch Animationen Schwindel, Übelkeit oder Krampfanfälle bekommen. Das prefers-reduced-motion Media Query fragt das Betriebssystem ab, ob der Nutzer Animationen reduzieren möchte. Setze in diesem Fall alle Transitions auf eine minimale Dauer oder deaktiviere sie komplett:

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

Halte die Transition-Dauer kurz. Alles über 400ms fühlt sich träge an und bremst die Interaktion aus. Nutzer mit kognitiven Einschränkungen oder motorischen Problemen empfinden langsame Transitions als frustrierend, weil sie das Feedback verzögern. Sweet Spot: 150 bis 300ms für UI-Interaktionen.

Verstecke keine wichtigen Inhalte hinter Hover-States mit Transitions. Tastatur- und Screenreader-Nutzer können Hover nicht auslösen und verpassen die Informationen. Wenn etwas wichtig ist, muss es auch ohne Hover sichtbar sein oder über Focus erreichbar sein.

Häufige Fehler

• Transition auf :hover setzen statt auf dem Element selbst: dann gibt’s keine Rück-Animation, weil die Transition-Definition verschwindet, sobald der Hover endet.
• display animieren wollen. Geht nicht, weil display nicht interpolierbar ist. Nutze opacity und visibility oder max-height-Tricks.
• transition: all bei Elementen mit vielen Properties. Das animiert alles, auch unbeabsichtigte Änderungen, und kostet Performance. Nenne lieber konkrete Properties.
• Zu lange Transitions über 500ms, die sich schwerfällig anfühlen. Nutzer wollen schnelles Feedback, keine Diashow.
• transition-delay nur für Hinweg setzen. Beim Zurückweg wirkt’s dann asymmetrisch. Entweder beide Richtungen gleich behandeln oder bewusst unterschiedlich gestalten.

Browser-Kompatibilität

transition und alle zugehörigen Einzeleigenschaften werden von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

Transitions funktionieren in HTML-Emails nur in Apple Mail und Thunderbird. Die meisten Clients ignorieren sie komplett.

Verwandte Eigenschaften