CSS Transitions

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 →

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

Was ist eine CSS Transition? +

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;
}