Verlangsamt „transition: all' in CSS3 Animationen?

CSS3-Übergänge: Beeinflusst „transition: all“ die Rendering-Geschwindigkeit?

Frage:

In CSS zielt die Verwendung von „transition: all“ auf alle Übergangseigenschaften für mehrere Elemente ab, während für jede Eigenschaft „transition: x“ angegeben wird zielt separat auf bestimmte Eigenschaften ab. Beeinträchtigt die Verwendung von „transition: all“ die Geschwindigkeit und Glätte von Animationen im Vergleich zur Ausrichtung auf bestimmte Eigenschaften?

Antwort:

Ja, die Verwendung von „transition: all“ kann dies tatsächlich kann sich negativ auf die Rendering-Leistung auswirken. Wenn „Übergang: alle“ angewendet wird, sucht der Browser nach allen anwendbaren Übergangseigenschaften, einschließlich derjenigen, die für den Benutzer möglicherweise nicht sichtbar sind, wie z. B. Farb- und Dimensionsänderungen.

Diese zusätzliche Verarbeitung kann die Animation verlangsamen , da der Browser nicht nur die Übergänge für die sichtbaren Eigenschaften berechnen muss, sondern auch nach Übergängen suchen muss, die möglicherweise nicht sichtbar sind auftreten.

Beispiel:

Im folgenden Beispiel kann die Verwendung von „transition: all“ zu unnötigen Animationen führen, wenn die Zoomstufe oder Schriftgröße geändert wird:

/* With "transition: all" */
div, span, a {
  transition: all .2s ease-in;
}

/* With specific transitions */
div {
  transition: margin .2s ease-in;
}
span {
  transition: opacity .2s ease-in;
}
a {
  transition: background .2s ease-in;
}

Empfehlung:

Um die Animationsleistung zu optimieren, wird es allgemein empfohlen Vermeiden Sie die Verwendung von „transition: all“ und zielen Sie stattdessen auf bestimmte Übergangseigenschaften ab. Dies verbessert nicht nur die Rendering-Geschwindigkeit, sondern verhindert auch unerwünschte Animationsspritzer beim Laden der Seite, bei denen die Anfangs- und Übergangsstile möglicherweise nacheinander angezeigt werden.

Das obige ist der detaillierte Inhalt vonVerlangsamt „transition: all' in CSS3 Animationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!