Übergang - CSS-Tricks | CSS-Almanach 2025

Die transitionEigenschaft ist eine Kurzform, mit der bis zu vier übergangsbezogene Longhand-Eigenschaften dargestellt werden:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Mit diesen Übergangseigenschaften können Elemente Werte über einen bestimmten Zeitraum ändern und die Eigenschaftsänderungen animieren, anstatt sie sofort auftreten zu lassen. Hier ist ein einfaches Beispiel, das die Hintergrundfarbe eines Elements auf: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Dieser Div benötigt eine halbe Sekunde, wenn sich die Maus darüber befindet, um von rot nach grün zu wechseln. Hier ist eine Live-Demonstration eines solchen Übergangs:

Siehe die Pen Transition-Demo von Louis Lazaris (@impressivewebs) auf CodePen.

Sie können eine bestimmte Eigenschaft wie oben angegeben angeben oder den Wert "all" verwenden, um auf Übergangseigenschaften zu verweisen.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

In diesem obigen Beispiel wechseln sowohl der Hintergrund als auch das Auffüllen aufgrund des für den transition-propertyTeil der Kurzschrift angegebenen Werts "all" .

Sie können separate Wertesätze kommasieren, um unterschiedliche Übergänge für unterschiedliche Eigenschaften durchzuführen:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Zum größten Teil spielt die Reihenfolge der Werte keine Rolle - es sei denn, es wird eine Verzögerung angegeben. Wenn Sie eine Verzögerung angeben, müssen Sie zuerst eine Dauer angeben. Der erste Wert, den der Browser als gültigen Zeitwert erkennt, repräsentiert immer die Dauer. Jeder nachfolgende gültige Zeitwert wird als Verzögerung analysiert.

Einige Eigenschaften können nicht überführt werden, da es sich nicht um animierbare Eigenschaften handelt. In der Spezifikation finden Sie eine vollständige Liste der animierbaren Eigenschaften.

Indem Sie den Übergang für das Element selbst angeben, definieren Sie den Übergang, der in beide Richtungen erfolgen soll. Das heißt, wenn die Stile geändert werden (z. B. beim Einschalten), werden ihre Eigenschaften geändert, und wenn sich die Stile zurück ändern (z. B. beim Verschieben aus), werden sie geändert. Die folgenden Demo-Übergänge werden beispielsweise beim Hover ausgeführt, jedoch nicht beim Hover-Off:

Siehe den Stift von Louis Lazaris (@impressivewebs) auf CodePen.

Dies geschieht, weil der Übergang in den :hoverStatuswähler verschoben wurde und es keinen passenden Übergang auf dem Selektor gibt, der direkt auf das Element ohne den :hoverStatus abzielt.

Für die Kompatibilität in allen unterstützenden Browsern sind Herstellerpräfixe erforderlich, wobei die Standardsyntax zuletzt deklariert wird:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (die erste stabile Version von IE, die unterstützt wird transition) benötigt kein -ms-Präfix.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.