Wie kann ich mehrere CSS-Übergänge auf ein einzelnes Element anwenden?

Mehrere CSS-Übergänge auf einem Element

Die CSS-Übergangseigenschaft ermöglicht eine reibungslose Animation von Elementstilen im Laufe der Zeit. Wenn jedoch mehrere Übergänge auf dasselbe Element angewendet werden, können sie sich gegenseitig überschreiben, was zu unbeabsichtigtem Animationsverhalten führt.

Lösung:

Mehrere CSS-Übergänge aktivieren Wenn Sie ein Element verwenden, verwenden Sie eine durch Kommas getrennte Liste für die Übergangseigenschaft. Dadurch wird der Browser darüber informiert, dass die angegebenen Eigenschaften gleichzeitig geändert werden sollen. Zum Beispiel:

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

Standardmäßig ist die Übergangszeitfunktion „ease“, die eine gleichmäßige Beschleunigungs- und Verzögerungskurve bietet. Bei Bedarf können Sie die Timing-Funktion mithilfe der Eigenschaft „transition-timing-function“ explizit angeben. Um beispielsweise einen linearen Übergang zu verwenden:

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

Für eine präzise Syntax können Sie die Übergangseigenschaften auch in einzelne Eigenschaften aufteilen:

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

Dieser Ansatz verwendet die Eigenschaft „transition-property“. um die zu animierenden Eigenschaften anzugeben, „transition-duration“ um die Animationsdauer festzulegen und „transition-timing-function“ um die Animationskurve zu definieren.

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