Die erste Regel bei Animationen im Web: Animieren Sie nicht width und height. Dies zwingt den Browser, eine Menge Dinge neu zu berechnen, und es ist langsam (oder „teuer“, wie man so schön sagt). Wenn Sie damit durchkommen, ist die Animation einer beliebigen transform-Eigenschaft schneller (und „günstiger“).
Aber transform kann knifflig sein. Schauen Sie sich an, wie komplex diese Menü-Öffnen/Schließen-Animation wird, um sie wirklich performant zu machen. Rik Schennink schreibt über eine weitere knifflige Situation: border-radius. Wenn Sie die Skalierung eines Elements in einer Richtung animieren, erhalten Sie einen quetschigen Effekt, bei dem die Ecken ihren schönen Radius nicht beibehalten. Die Lösung? 9-Slice-Skalierung
Diese Methode ermöglicht es Ihnen, das Element zu skalieren und die Bilder 2, 4, 6 und 8 zu dehnen, während Sie 1, 3, 7 und 9 mit absoluter Positionierung mit ihren jeweiligen Ecken verbinden. Dies führt dazu, dass die Ecken beim Skalieren nicht gedehnt werden.
Es ist wie die 2020er Version von Sliding Doors.