transition

Die Eigenschaft transition ist eine Shorthand-Eigenschaft, die verwendet wird, um bis zu vier Longhand-Eigenschaften im Zusammenhang mit Übergängen darzustellen.

.element {
  transition: background-color 0.5s ease;
}

Syntax

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Demo

transition-Eigenschaften ermöglichen es Elementen, Werte über eine festgelegte Dauer zu ändern, wobei die Eigenschaftsänderungen animiert werden, anstatt sofort aufzutreten. Wenn wir beispielsweise eine Box mit rotem Hintergrund haben, die bei Mouseover zu einem grünen Hintergrund wechseln soll, können wir die transition-Eigenschaft verwenden, um zwischen den Hintergrundfarben zu wechseln.

Festlegen, welche Eigenschaften übergehen sollen

Beachten Sie, dass wir die Eigenschaft background-color in der transition-Deklaration aufgeführt haben. Das teilt dem Browser mit, dass wir planen, die Hintergrundfarben zu überblenden und nichts anderes, wenn ein Übergang zwischen den Mouseover- und Nicht-Mouseover-Zuständen auftritt. Beachten Sie auch, dass wir dem Browser mitgeteilt haben, dass der Übergang zwei Sekunden dauern soll und einer ease-out Timing-Funktion folgen soll, was bedeutet, dass der Übergang schnell beginnt und gegen Ende langsamer wird.

Sie können eine bestimmte Eigenschaft wie oben angeben oder den Wert all verwenden, um sich auf alle überblendbaren Eigenschaften zu beziehen.

.element {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
.element:hover {
  background: green;
  padding: 20px;
}

all ist für den transition-property-Teil des Shorthands angegeben. Sie können auch durch Kommas getrennte Wertesätze verwenden, um verschiedene Übergänge für verschiedene Eigenschaften durchzuführen.

.element {
  transition: background 0.2s ease,
              padding 0.8s linear;
}

In den meisten Fällen spielt die Reihenfolge der Werte keine Rolle – es sei denn, eine Verzögerung wird 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 interpretiert.

Einige Eigenschaften können nicht überblendet werden, da sie keine animierbaren Eigenschaften sind. Eine vollständige Liste der animierbaren Eigenschaften finden Sie in der Spezifikation.

Indem Sie den Übergang auf dem Element selbst angeben, definieren Sie, dass der Übergang in beide Richtungen erfolgen soll. Das heißt, wenn die Stile geändert werden (z. B. bei Mouseover ein), werden die Eigenschaften überblendet, und wenn die Stile zurückgeändert werden (z. B. bei Mouseover aus), werden sie überblendet. Zum Beispiel überblendet die folgende Demo bei Mouseover, aber nicht bei Mouseover aus:

Browser-Unterstützung

CSS-Tricks, die transition verwenden

Weitere Informationen

• CSS Transitions Spezifikation (W3C)
• CSS Transition Shorthand Property (DigitalOcean)
• Ein interaktiver Leitfaden zu CSS Transitions (Josh Comeau)
• CSS will-change Eigenschaft: Wann und wann nicht verwenden (DigitalOcean)

Verwandt