Präzisere Steuerung von CSS-Transformationen mit individuellen Transformationseigenschaften

Elemente mit den Eigenschaften translate, rotate und scale transformieren

Bramus

L. David Baron

Die CSS-Property transform

Wenn Sie einem Element Transformationen zuweisen möchten, verwenden Sie die CSS-Eigenschaft transform. Die Property akzeptiert eine oder mehrere <transform-function>, die nacheinander angewendet werden.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

Das ausgewählte Element wird um 50% entlang der X-Achse verschoben, um 30 Grad gedreht und schließlich auf 120 % skaliert.

Die Property transform funktioniert zwar einwandfrei, aber es wird etwas mühsam, wenn Sie einen dieser Werte einzeln ändern möchten.

Wenn Sie die Skalierung beim Hovering ändern möchten, müssen Sie alle Funktionen in der Transform-Eigenschaft duplizieren, auch wenn ihre Werte unverändert bleiben.

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

Die einzelnen Transformationseigenschaften

In Chrome 104 sind einzelne Eigenschaften für CSS-Transformationen verfügbar. Die Attribute sind scale, rotate und translate. Mit ihnen können Sie diese Teile einer Transformation individuell definieren.

Damit schließt sich Chrome Firefox und Safari an, die diese Properties bereits unterstützen.

Wenn Sie das vorherige transform-Beispiel mit den einzelnen Properties neu schreiben, sieht Ihr Snippet so aus:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Reihenfolge ist wichtig

Ein wichtiger Unterschied zwischen der ursprünglichen CSS-Eigenschaft transform und den neuen Eigenschaften besteht in der Reihenfolge, in der die angegebenen Transformationen angewendet werden.

Bei transform werden die Transformationsfunktionen in der Reihenfolge angewendet, in der sie geschrieben sind – von links (außen) nach rechts (innen).

Bei den einzelnen Transformationseigenschaften entspricht die Reihenfolge nicht der Deklarationsreihenfolge. Die Reihenfolge ist immer gleich: zuerst translate (außen), dann rotate und dann scale (innen).

Das bedeutet, dass beide folgenden Code-Snippets dasselbe Ergebnis liefern:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

In beiden Fällen werden die ausgewählten Elemente zuerst um 50% auf der X-Achse verschoben, dann um 30deg gedreht und schließlich um 1.2 skaliert.

Wenn eine der einzelnen Transformationseigenschaften zusammen mit einer transform-Eigenschaft deklariert wird, werden die einzelnen Transformationen zuerst angewendet (translate, rotate und dann scale), die transform-Transformation zuletzt (innen). Weitere Informationen finden Sie in der Spezifikation, in der definiert wird, wie die Transformationsmatrix berechnet werden soll.

Animationen

Diese Properties wurden hauptsächlich hinzugefügt, um Animationen zu vereinfachen. Angenommen, Sie möchten ein Element so animieren:

transform verwenden

Wenn Sie diese Animation mit transform implementieren möchten, müssen Sie alle Zwischenwerte für alle definierten Transformationen berechnen und in jeden Keyframe aufnehmen. Wenn Sie beispielsweise eine Drehung bei 10% ausführen möchten, müssen auch die Werte für die anderen Transformationen berechnet werden, da für die Eigenschaft transform alle benötigt werden.

Der resultierende CSS-Code sieht dann so aus:

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

Einzelne Transformationseigenschaften verwenden

Mit einzelnen Transformationseigenschaften wird das Schreiben viel einfacher. Anstatt alle Transformationen von Keyframe zu Keyframe zu ziehen, können Sie jede Transformation einzeln anvisieren. Außerdem müssen Sie nicht mehr alle Zwischenwerte berechnen.

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

Einzelne Transformierungseigenschaften und mehrere Frames verwenden

Um Ihren Code modular zu gestalten, können Sie jede Unteranimation in eigene Keyframes unterteilen.

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

Dank dieser Aufteilung kannst du jeden einzelnen Satz von Frames nach Belieben anwenden, da sich die transform-Properties, die jetzt zu einzelnen Properties geworden sind, nicht mehr überschreiben. Außerdem können Sie jeder Transformation ein anderes Timing zuweisen, ohne alles neu schreiben zu müssen.

Leistung

Animationen mit diesen neuen Properties sind genauso effizient wie Animationen der vorhandenen transform-Property.

translate-, rotate- und scale-Animationen werden im Renderer genauso ausgeführt wie transform-Animationen. Sie haben also dieselbe positive Auswirkung auf die Animationen wie transform.

Diese neuen Properties funktionieren auch mit dem Attribut will-change. Im Allgemeinen sollten Sie will-change nicht übermäßig verwenden. Verwenden Sie es nur für die erforderliche Mindestanzahl von Elementen und so kurz wie möglich. Es ist aber auch gut, so konkret wie möglich zu sein. Wenn Sie beispielsweise will-change verwenden, um eine Animation mit den Properties rotate und filter zu optimieren, sollten Sie dies mit will-change: rotate, filter deklarieren. Das ist etwas besser als die Verwendung von will-change: transform, filter, wenn Sie rotate und filter animieren, da einige der Datenstrukturen, die Chrome bei Verwendung von will-change im Voraus erstellt, für transform und rotate unterschiedlich sind.

Teil der Reihe „Neue interoperable Serien“