Wie kann ich dafür sorgen, dass mehrere CSS-Übergänge für ein Element gleichzeitig funktionieren?

Mehrere CSS-Übergänge für ein Element

In CSS ermöglichen Übergänge flüssige Animationen, indem sie die Werte bestimmter Eigenschaften im Laufe der Zeit schrittweise ändern. Wenn jedoch mehrere Übergänge auf dasselbe Element angewendet werden, können die nachfolgenden Übergänge die vorherigen überschreiben.

Beachten Sie das folgende CSS-Code-Snippet:

.nav a {
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover {
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

In diesem Code sind sowohl die Farbe und für Textschatteneigenschaften sind Übergangseffekte definiert. Das Problem besteht darin, dass der zweite Übergang den ersten überschreibt. Infolgedessen erfolgt die Textschattenanimation, die Farbanimation jedoch nicht.

Um dieses Problem zu beheben und beide Übergänge gleichzeitig funktionieren zu lassen, verwenden Sie CSS-Übergangseigenschaften in Verbindung. So geht's:

Komma-getrennte Übergangseigenschaften

In allen Browsern, die Übergänge unterstützen, können Übergangseigenschaften durch Kommas getrennt werden. Durch die Trennung mehrerer Eigenschaften durch Kommas können beide Übergänge gleichzeitig ausgelöst werden.

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

Beschleunigungsfunktion angeben

Standardmäßig verwenden Übergänge die Beschleunigungs-Timing-Funktion. Wenn Sie eine andere Timing-Funktion verwenden möchten, beispielsweise eine lineare, muss diese explizit angegeben werden.

transition: color .2s linear, text-shadow .2s linear;

Übergangseigenschaften-Kurzschrift

Für einen saubereren Ansatz bei der Verwendung identischer Timings und Timing-Funktionen für Wenn Sie mehrere Eigenschaften verwenden, verwenden Sie die Transition-*-Eigenschaften anstelle der Abkürzung:

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

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass mehrere CSS-Übergänge für ein Element gleichzeitig funktionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!