CSS Transitions: transition mit property, duration und timing-function – Übergänge zwischen zwei Zuständen

Die Kurzform transition

transition fasst vier Werte zusammen: die Eigenschaft, die Dauer, die Zeitkurve und eine Verzögerung. transition: color 200ms ease-out lässt jede Änderung von color in 200 Millisekunden ausklingen. Mehrere Eigenschaften werden mit Komma getrennt; all animiert jede Änderung, ist aber teuer und schwer zu kontrollieren. Die Transition steht auf dem Element im Ruhezustand, nicht in der :hover-Regel – sonst läuft sie nur hinein, aber nicht zurück.

a {
  color: #1A1820;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}
a:hover { color: #7A2FB0; border-color: #7A2FB0; }

Welche Eigenschaften animierbar sind

Animierbar ist, was einen Zwischenwert hat: Längen, Farben, Zahlen, Transformationen, Schatten. display, font-family oder visibility zwischen zwei Schlüsselwörtern kennen keinen Zwischenwert und springen. height: auto ist eine bekannte Falle: Zwischen einer Länge und auto gibt es keine Interpolation. Die Lösung sind max-height, grid-template-rows: 0fr → 1fr oder seit 2023 interpolate-size: allow-keywords.

Zeitkurven: ease, linear, cubic-bezier, steps

ease beschleunigt und bremst, linear läuft gleichmäßig, ease-in startet langsam, ease-out endet langsam. cubic-bezier(x1, y1, x2, y2) definiert eine eigene Kurve; steps(n) springt in n Stufen und eignet sich für Zähler und Sprite-Animationen. Für Oberflächen hat sich ease-out mit kurzen Dauern bewährt: Das Element reagiert sofort und kommt weich an.

Leistung: was der Browser günstig animiert

transform und opacity animiert der Browser auf dem Compositor, ohne Layout und ohne neues Zeichnen; sie laufen auch auf schwachen Geräten flüssig. width, height, margin, top oder font-size lösen bei jedem Frame eine Neuberechnung des Layouts aus. Ein Element, das sich bewegen soll, bekommt deshalb transform: translateX(), nicht left.

Warum der Übergang beim ersten Mal ausbleibt

Ein Übergang braucht zwei Werte: einen, von dem aus, und einen, zu dem hin. Fehlt der erste, weil das Element gerade erst eingefügt wurde oder weil seine Anzeigeart eben noch none war, passiert nichts – es erscheint einfach im Zielzustand. Das ist der Grund, warum ein eingeblendetes Aufklappmenü oft ohne jede Weichheit auftaucht, obwohl der Übergang richtig notiert ist.

Lange half nur ein Umweg: das Element sichtbar machen, den Browser zur Berechnung zwingen und die Zieleigenschaft erst danach setzen. Inzwischen gibt es dafür saubere Mittel – eine Eigenschaft, die eine sonst nicht übergangsfähige Eigenschaft wie die Anzeigeart am Ende des Übergangs statt am Anfang umschalten lässt, und eine zweite, die einen Startwert für den ersten Stilwechsel eines Elements angibt. Wer ohne beides auskommen will, blendet nicht die Anzeigeart aus, sondern arbeitet mit Deckkraft und Sichtbarkeit: Beide haben immer einen Ausgangswert, von dem aus sich wechseln lässt.

Mehrere Übergänge, Verzögerungen und das Umkehren

Alle vier Bestandteile nehmen Listen entgegen, und die Listen werden der Reihe nach zugeordnet: Der erste Wert der Dauer gehört zur ersten genannten Eigenschaft, und ist eine Liste kürzer als die andere, beginnt sie wieder von vorn. Damit lassen sich unterschiedliche Eigenschaften verschieden schnell bewegen – die Farbe schnell, die Größe langsam –, und mit einer Verzögerung an der zweiten entsteht eine kleine Abfolge ohne Keyframes.

Wird ein Übergang unterbrochen, weil sich der Zustand mitten in der Bewegung wieder ändert, startet der Browser nicht neu, sondern beginnt vom aktuellen Zwischenwert aus. Bei einer symmetrischen Zeitkurve wirkt das natürlich; bei einer stark beschleunigenden fällt auf, dass der Rückweg anders aussieht als der Hinweg. Für Bedienelemente, die schnell hintereinander berührt werden, lohnt deshalb die Regel, für den Hinweg und den Rückweg unterschiedliche Dauern und Kurven zu setzen: Das Erscheinen darf sich Zeit lassen, das Verschwinden sollte schnell gehen.

Die Kurzform und ihre Reihenfolge

In der Kurzform ist die Reihenfolge der Angaben weitgehend frei, mit einer Ausnahme: Von zwei Zeitangaben ist die erste immer die Dauer und die zweite die Verzögerung. transition: opacity 2s 1s heißt also eine Sekunde warten und zwei Sekunden laufen, nicht umgekehrt. Fehlt eine der Angaben, gilt ihr Ausgangswert – und der Ausgangswert der Dauer ist null, weshalb eine Kurzform ohne Zeitangabe gar nichts bewirkt.

Der Ausgangswert der zu bewegenden Eigenschaft ist dagegen all. Das ist bequem und selten richtig: Es setzt jede künftig hinzukommende Eigenschaft mit in Bewegung, auch solche, die man nie animieren wollte, und kostet den Browser Arbeit, weil er bei jedem Stilwechsel alle Eigenschaften vergleichen muss. Die Eigenschaften einzeln zu nennen ist deshalb nicht Pedanterie, sondern verhindert Bewegungen, die niemand beabsichtigt hat.

prefers-reduced-motion: Bewegung abschaltbar halten

Manche Nutzer stellen ihr System auf weniger Bewegung. Die Media Query (prefers-reduced-motion: reduce) meldet das; darin werden Transitionen verkürzt oder abgeschaltet. Der Zustandwechsel bleibt, nur der Weg dazwischen entfällt.

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

Häufige Fragen