Willensänderung - CSS-Tricks | CSS-Almanach 2025

Die will-changeEigenschaft in CSS optimiert Animationen, indem der Browser weiß, welche Eigenschaften und Elemente gerade bearbeitet werden sollen, wodurch möglicherweise die Leistung dieser bestimmten Operation erhöht wird.

Diese Eigenschaft hat vier Werte:

auto: Standard-Browser-Optimierungen werden angewendet.
scroll-position: Gibt an, dass die Bildlaufposition des Elements in naher Zukunft animiert wird, damit sich der Browser auf Inhalte vorbereitet, die im Bildlauffenster eines Elements nicht sichtbar sind.
contents: Es wird erwartet, dass sich der Inhalt eines Elements ändert, damit der Browser den Inhalt dieses Elements nicht zwischenspeichert.
: Jede benutzerdefinierte Eigenschaft wie transformoder , opacitydass wir wollen , will-changeum angewendet werden.

Wir können den Browser darüber informieren, dass eine Änderung an der transformImmobilie bevorsteht:

.element ( will-change: transform; )

Wenn wir mehrere Werte deklarieren möchten, können wir eine durch Kommas getrennte Liste verwenden, z.

.element ( will-change: transform, opacity; )

Es ist jedoch wichtig, die will-changeEigenschaft nicht zu stark zu verwenden, da dies dazu führen kann, dass die Seite weniger leistungsfähig ist (beachten Sie, dass allfür diese Eigenschaft aus gutem Grund kein Wert vorhanden ist ). Aus diesem Grund empfiehlt MDN, die Eigenschaft als letzten Ausweg für vorhandene Leistungsprobleme zu verwenden, anstatt solche, von denen Sie erwarten, dass sie auftreten könnten. Wenn Sie es verwenden, wird empfohlen, es will-changekurz vor dem Ändern eines Elements oder einer Eigenschaft umzuschalten und es kurz nach Abschluss des Vorgangs wieder auszuschalten.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.