Wie können mehrere CSS-Übergänge auf einem einzelnen Element gleichzeitig funktionieren?

Mehrere CSS-Übergänge auf einem Element

Im angegebenen HTML-Snippet scheinen sich die bereitgestellten CSS-Übergänge gegenseitig zu überschreiben, was nur dazu führt, dass Textschatteneffekt zur Animation beim Schweben. Um gleichzeitige Animationen von Farbe und Textschatten zu ermöglichen, sind Anpassungen erforderlich.

Lösung:

1. Verwenden Sie durch Kommas getrennte Übergangseigenschaften:

Übergangseigenschaften in CSS können durch Kommas getrennt werden. Mithilfe dieser Technik können Sie mehrere Eigenschaften angeben, die unabhängig voneinander übergehen. So können Sie den Code aktualisieren:

.nav a {
  transition: color .2s linear, text-shadow .2s linear;
}

2. Geben Sie die lineare Timing-Funktion explizit an:

Während die lineare Timing-Funktion die Standardeinstellung ist, wird aus Gründen der Übersichtlichkeit empfohlen, sie explizit anzugeben. Fügen Sie die folgende Zeile hinzu, um sicherzustellen, dass beide Übergänge einem linearen Verlauf folgen:

transition-timing-function: linear;

3. Verwenden Sie Transition-*-Eigenschaften (optional):

Für komplexe Übergänge mit mehreren Eigenschaften ist es oft sauberer, die dedizierten Transition-*-Eigenschaften anstelle der Kurzsyntax zu verwenden. Hier ist ein Beispiel:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

Ergebnis:

Mit diesen Änderungen werden sowohl die Farb- als auch die Textschatteneigenschaften reibungslos übergehen, wenn Sie mit der Maus über die Ankerelemente im fahren .nav-Liste. Die Animationen werden gleichzeitig und unabhängig voneinander ausgeführt, was einen dynamischeren Effekt ermöglicht.

Das obige ist der detaillierte Inhalt vonWie können mehrere CSS-Übergänge auf einem einzelnen Element gleichzeitig funktionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!