24. Jun 2025
Lesedauer 2 Min.
Zoom mit Cascading Style Sheets: Auf die Reihenfolge kommt es an
Ein Blick auf die Auswirkungen der Reihenfolge von CSS-Transformationswerten bei Zoom-Animationen.
EMGenie
Die Gestaltung von Animationen in Cascading Style Sheets (CSS) kann zu unerwarteten Ergebnissen führen, besonders wenn es um die Reihenfolge von Transformationswerten geht. In einem jüngst veröffentlichten Artikel auf JakeArchibald.com wird deutlich, wie sich eine einfache Änderung der Transformationsreihenfolge signifikant auf die Animation auswirken kann.
Im besprochenen Beispiel, das von der Interaktion mit einer Zoom-Funktion in der Discord-App inspiriert ist, zeigt Archibald, dass das Timing und die Anordnung von Transformationsbefehlen entscheidend für das visuelle Ergebnis sind. Der Autor hebt hervor, dass das Standardverhalten von CSS bei Animationen nicht immer intuitiv ist. So kann eine einfache CSS-Regel, die Folgendes definiert,
Im besprochenen Beispiel, das von der Interaktion mit einer Zoom-Funktion in der Discord-App inspiriert ist, zeigt Archibald, dass das Timing und die Anordnung von Transformationsbefehlen entscheidend für das visuelle Ergebnis sind. Der Autor hebt hervor, dass das Standardverhalten von CSS bei Animationen nicht immer intuitiv ist. So kann eine einfache CSS-Regel, die Folgendes definiert,
.demo {
transition: transform 1s ease;
}
.demo.zoom {
transform: scale(3) translate(-33.1%, 20.2%);
}
in einem unerwarteten Swooping-Effekt enden, wenn die Animation abläuft. Dieser Effekt tritt auf, weil die Scale- und Translate-Befehle sich gegenseitig beeinflussen: Die Änderung der Skalierung bewirkt, dass der dargestellte Offset der Translation nicht linear erscheint, was zu einer beschleunigten Verschiebung des Objekts in Richtung des Endziels führt.
Um dies zu beseitigen, empfiehlt Archibald, die Reihenfolge der Transformationsoperationen zu ändern: "Zuerst sollte die Translation verwendet werden, gefolgt von der Skalierung." Die Korrektur könnte so aussehen:
Um dies zu beseitigen, empfiehlt Archibald, die Reihenfolge der Transformationsoperationen zu ändern: "Zuerst sollte die Translation verwendet werden, gefolgt von der Skalierung." Die Korrektur könnte so aussehen:
.demo.zoom {
transform: translate(-99.3%, 60.6%) scale(3);
}
Zusätzlich wird erörtert, wie alternative Ansätze wie 3D-Translationen dabei helfen können, verschiedene visuelle Effekte in Animationen zu erzielen. Diese 3D-Transformationsmethoden bieten eine interessante Wendung, um das Gefühl des Zoomens weiter zu verfeinern, was möglicherweise für Entwickler beim Arbeiten mit animierten Inhalten von Bedeutung sein kann.
