Box-Schatten mit seidig-glatter Leistung animieren

Avatar of Robin Rendle
Robin Rendle am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Eine nette Technik von Tobias Ahlin

Wie animieren Sie die box-shadow Eigenschaft in CSS, ohne dass es bei jedem Frame zu Wiederholungen (Re-paints) kommt und die Leistung Ihrer Seite stark beeinträchtigt wird? Kurze Antwort: Das tun Sie nicht. Das Animieren einer Änderung von box-shadow wird die Leistung beeinträchtigen.

Es gibt jedoch eine einfache Möglichkeit, denselben Effekt zu imitieren, mit minimalen Wiederholungen (Re-paints), die Ihre Animationen mit soliden 60 FPS laufen lassen sollte: Animieren Sie die Deckkraft eines Pseudo-Elements.

Direkter Link →