CSS/Eigenschaften/Animation/will-change

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft will-change bereiten Sie den Browser auf künftige Animationen vor, die dann bereits berechnet werden. Dabei wird nicht die Software Rendering Engine des Browsers sondern die GPU zur Hardwarebeschleunigung herangezogen, die für mathematische und geometrische Berechnungen performanter ist.

  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Beispiel
.animiert { transition: transform 1s ease-out; } .animiert:hover { will-change: transform; } .animiert:active { transform: rotateY(180deg); }
Sobald sie das animierte Element mit der Maus überfahren, wird das Transformieren vorbereitet. Ein Klick auf das Element aktiviert die Pseudoklasse :active und die Animation wird ausgeführt.

Folgende Angaben sind möglich:

  • auto
  • contents: zeigt an, dass der Inhalt bald geändert wird.
  • <custom-ident>: ermöglicht, zu ändernde Eigenschaften anzugeben
  • scroll-position: zeigt an, dass der Inhalt bald verschoben wird. Deshalb muss ihn der Browser nicht cachen.
Beachten Sie: Deklarieren Sie will-change nicht zusammen mit der zu animierenden Eigenschaft. Dann muss der Browser gleichzeitig neben der Animation auch die vorbereitende will-change-Berechnung ausführen, so dass die Animation sogar verlangsamt wird.
Empfehlung: Vermeiden Sie, zu viele Eigenschaften gleichzeitig zu deklarieren.

Weblinks[Bearbeiten]