Using CSS transitions (MDN)

Quelle / bibliografische Angaben

MDN-Leitfaden „Using CSS transitions“, englische Fassung.

• Stand laut Seite: „last modified on Dec 16, 2025“
• URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions/Using, abgerufen 2026-09-12 (über Firecrawl)
• Ausgewertet: Einleitung, animierbare Eigenschaften, Definition, erste zwei Beispiele

Kurzfassung

Transitions lassen eine Eigenschaftsänderung über eine Zeitspanne ablaufen statt sofort. Die Zwischenwerte berechnet der Browser selbst („implizite Transition“).

Kernaussagen

• Implizit: Zwischen Start- und Endzustand definiert der Browser die Zwischenschritte.
• Steuerbar: welche Eigenschaften (transition-property), Dauer (transition-duration), Beschleunigungskurve (transition-timing-function), Verzögerung (transition-delay).
• Kurzschreibweise transition: <property> <duration> <timing-function> <delay>; wird empfohlen, weil sie auseinanderlaufende Teilwerte vermeidet.
• Nicht alles ist animierbar.
• auto: Die Spezifikation empfiehlt, nicht von oder zu auto zu animieren. Gecko hält sich daran, WebKit ist weniger streng – Ergebnisse sind unvorhersehbar und sollen vermieden werden.
• Beispiel mit mehreren Eigenschaften nutzt rotate als eigene Eigenschaft neben width, height, background-color.

Eigene Einordnung

Die auto-Warnung ist inzwischen teilweise überholt: interpolate-size erlaubt es gezielt, aber nur in Chromium (siehe Animate to height auto (Chrome for Developers)). Die Seite verweist darauf im ausgewerteten Teil nicht.

Verknüpftes Wissen

• CSS-Transitions und Keyframe-Animationen
• Ein- und Ausblenden mit CSS animieren