transition

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.

Steckbrief transition

Syntax: transition: <property> <duration> <timing-function> <delay>
Initialwert: all 0s ease 0s
Vererbt: Nein
Animierbar: Nein
Kurzform für: transition-property, transition-duration, transition-timing-function, transition-delay

Kategorie: Animationen
Werte: 14
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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

14 Werte

transition-property

Wert	Beschreibung	Beispiel
`all`	Alle animierbaren Properties werden animiert. (Standard)	transition-property: all;
`none`	Keine Transition.	transition-property: none;
`<property>`	Nur die genannte Eigenschaft wird animiert. Mehrere mit Komma trennen.	transition-property: opacity, transform;

transition-duration

Wert	Beschreibung	Beispiel
`0s`	Keine Übergangszeit (Standard). Werte in s oder ms.	transition-duration: 0s;
`<time>`	Dauer in Sekunden oder Millisekunden.	transition-duration: 0.3s; transition-duration: 300ms;

transition-timing-function

Wert	Beschreibung	Beispiel
`ease`	Langsam starten, beschleunigen, langsam enden. (Standard)	transition-timing-function: ease;
`linear`	Gleichmäßige Geschwindigkeit.	transition-timing-function: linear;
`ease-in`	Langsam starten, dann beschleunigen.	transition-timing-function: ease-in;
`ease-out`	Schnell starten, dann abbremsen.	transition-timing-function: ease-out;
`ease-in-out`	Langsam starten und enden.	transition-timing-function: ease-in-out;
`cubic-bezier(x1, y1, x2, y2)`	Custom Kurve mit 4 Kontrollpunkten.	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
`steps(n, start\|end)`	Springt in n diskreten Schritten.	transition-timing-function: steps(4, end);

transition-delay

Wert	Beschreibung	Beispiel
`0s`	Kein Delay (Standard).	transition-delay: 0s;
`<time>`	Wartezeit bevor Transition startet. Negative Werte starten die Transition mittendrin.	transition-delay: 0.2s; transition-delay: -0.1s;

Beispiele

5 Beispiele

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

Button mit Transition

.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>

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-Funktionen Vergleich

.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>

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.

Card mit mehreren Transitions

.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>

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

Gestaffelte Transitions

.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

5 Punkte

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Keine

Transitions werden komplett ignoriert
Outlook

Keine

Kein Support für Transitions
Thunderbird

Komplett
Yahoo Mail

Keine

Kein Support für Transitions

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da