M291 · LU05b

CSS Transitions

Hover über die Elemente

Demo 1

Farbe animieren

↓ Hover

CSS
.box {
  background-color: steelblue;

  transition: background-color
    600ms ease-in-out;
}

.box:hover {
  background-color: tomato;
}

Demo 2

Transform: scale()

↓ Hover

CSS
/* transform ändert kein Layout
   → sehr performant */

.box {
  transition: transform
    400ms ease-out;
}

.box:hover {
  transform: scale(1.4);
}

Demo 3

Transform: translate() + rotate()

↓ Hover

CSS
/* cubic-bezier → Überschwing */

.box {
  transition: transform 500ms
    cubic-bezier(.34,1.56,.64,1);
}

.box:hover {
  transform:
    translateY(-36px)
    rotate(15deg);
}

Demo 4

Opacity

↓ Hover

CSS
/* Element bleibt im Layout –
   nur unsichtbar */

.box {
  transition: opacity
    700ms ease-in-out;
}

.box:hover {
  opacity: 0.1;
}

Demo 5

Mehrere Eigenschaften

↓ Hover

✦
CSS
.box {
  transition:
    background-color 400ms ease-in-out,
    border-color     400ms ease-in-out,
    transform        400ms ease-in-out,
    border-radius    400ms ease-in-out;
}

.box:hover {
  background-color: yellow;
  border-color:     yellow;
  transform:        rotate(45deg);
  border-radius:   50%;
}

Demo 6

Width

↓ Hover

Hover →
Hover →
Hover →
CSS
/* Nur zwischen zwei fixen
   Werten animierbar – nicht
   zu «auto» */

.bar {
  width: 40%;
  overflow: hidden;

  transition: width
    600ms ease-in-out;
}

.bar:hover {
  width: 100%;
}

Demo 7

Timing-Funktionen im Vergleich

↓ Hover über eine Zeile

ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier
CSS
/* Alle bewegen sich gleich weit
   in gleicher Zeit */

.dot-ease {
  transition: left 1200ms ease;
}
.dot-ease-in {
  transition: left 1200ms ease-in;
}
.dot-ease-out {
  transition: left 1200ms ease-out;
}
.dot-linear {
  transition: left 1200ms linear;
}
.dot-bounce {
  transition: left 1200ms
    cubic-bezier(.34,1.56,.64,1);
}

Demo 8 · Chrome/Edge only (Stand 2026)

Height: 0 → auto

↓ Klick

Eine Transition animiert den Übergang zwischen zwei CSS-Zuständen. Eigenschaft, Dauer und Timing-Funktion – der Browser berechnet alle Zwischenwerte.
CSS
/* Einmal global setzen */
:root {
  interpolate-size: allow-keywords;
}

.panel {
  height:   0;
  opacity: 0;
  overflow: hidden;

  transition:
    height  500ms ease-in-out,
    opacity 500ms ease-in-out;
}

.panel.open {
  height:   auto; /* ✅ */
  opacity: 1;
}

Trigger-Pseudoklassen

Welcher Zustand löst die Transition aus? — Jedes Beispiel hat live-editierbare Regler für duration, easing und delay.

Demo 9 · Trigger

:hover — Cursor über dem Element

↓ Hover

Hover mich

Transition anpassen

duration 300ms
easing
delay 0ms
CSS
.pill {
  transition:
    background-color
    300ms
    ease
    0ms;
}

.pill:hover {
  background: steelblue;
  color:      #000;
  transform: translateY(-5px);
}

Demo 10 · Trigger

:focus — Element ist fokussiert

↓ Klick ins Feld oder Tab-Taste

Tab-Taste wechselt Felder

Transition anpassen

duration 400ms
easing
delay 0ms
CSS
input {
  border: 2px solid #333;
  outline: none;

  transition:
    border-color
    400ms
    ease
    0ms,
    box-shadow
    400ms
    ease
    0ms;
}

input:focus {
  border-color: yellow;
  box-shadow:   0 0 0 4px
    rgba(yellow, .15);
}

Demo 11 · Trigger

:focus-within — Kind-Element fokussiert

↓ In ein Feld klicken

Transition anpassen

duration 400ms
easing
delay 0ms
CSS
/* Eltern-Element reagiert,
   wenn ein Kind fokussiert ist */

.card {
  border: 2px solid #333;

  transition:
    border-color
    400ms
    ease
    0ms;
}

.card:focus-within {
  border-color: steelblue;
  box-shadow:
    0 0 0 4px rgba(steelblue,.12);
}

Demo 12 · Trigger

:active — Maustaste gedrückt

↓ Maustaste gedrückt halten

Transition anpassen

duration 100ms
easing
delay 0ms
CSS
/* Feuert nur solange die
   Maustaste gedrückt ist */

.btn {
  box-shadow: 0 6px 0 #8b1818;

  transition:
    transform
    100ms
    ease
    0ms,
    box-shadow
    100ms
    ease
    0ms;
}

.btn:active {
  transform:  translateY(5px);
  box-shadow: 0 1px 0 #8b1818;
}

Demo 13 · Trigger

:target — URL-Fragment stimmt mit id überein

↓ Link klicken → URL-Hash ändert sich

#tgt-a · Abschnitt A
#tgt-b · Abschnitt B
#tgt-c · Abschnitt C

Transition anpassen

duration 500ms
easing
delay 0ms
CSS + HTML
/* URL: seite.html#tgt-a
   → Element mit id="tgt-a"
     wird zum :target */

.section {
  border: 2px solid #333;

  transition:
    border-color
    500ms
    ease
    0ms;
}

.section:target {
  border-color: yellow;
  background:    rgba(yellow,.06);
}

/* HTML */
<a href="#tgt-a">Link</a>
<div id="tgt-a">…</div>