Mehrere Animationseffekte mit „animation-composition“ kombinieren

Bramus

Mit der Eigenschaft animation-composition können Sie steuern, was passieren soll, wenn mehrere Animationen gleichzeitig dieselbe Eigenschaft beeinflussen.

Angenommen, Sie haben diese Basistransformation auf ein Element angewendet:

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

Und Sie haben auch diese Keyframes:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

Wenn Sie diese Keyframes auf ein Element anwenden, ersetzt die transform-Eigenschaft im to-Keyframe die vorhandene transform-Eigenschaft. Das ist das Standardverhalten.

Mit animation-composition können Sie jetzt steuern, was anstelle der Standardeinstellung replace passieren soll. Zulässige Werte:

• replace: Der Effektwert ersetzt den zugrunde liegenden Wert. (Standard)
• add: Der Effektwert wird dem zugrunde liegenden Wert hinzugefügt.
• accumulate: Der Effektwert wird mit dem zugrunde liegenden Wert kombiniert.

Der Unterschied zwischen Addition und Akkumulation ist gering. Nehmen wir zum Beispiel die beiden Werte blur(2) und blur(3). Wenn sie addiert werden, ergibt sich blur(2) blur(3), bei der Akkumulation ergibt sich blur(5).

Sie können das mit einer Tasse vergleichen, die mit Tee gefüllt ist. Wenn Sie Milch hineingießen, passiert Folgendes:

• replace: Der Tee wird entfernt und durch die Milch ersetzt.
• add: Die Milch wird in die Tasse gegeben, bleibt aber über dem Tee.
• accumulate: Die Milch wird dem Tee hinzugefügt und da beide Flüssigkeiten sind, vermischen sie sich gut.

Demo

In der Demo gibt es drei graue Kästchen, auf die die Basistransformation transform und animation angewendet wurden.

Obwohl diese Kästchen dieselbe Animation haben, ergibt sich ein anderes Ergebnis, da sie eine andere animation-composition haben:

Das erste Kästchen ist auf animation-composition: replace gesetzt. Das ist das Standardverhalten. In der Endposition wird der ursprüngliche Wert translateX(50px) rotate(45deg) für transform durch translateX(100px) ersetzt.

Das zweite Kästchen ist auf animation-composition: add gesetzt. In der Endposition wird translateX(100px) zu translateX(50px) rotate(45deg) hinzugefügt, was zu translateX(50px) rotate(45deg) translateX(100px) führt. Dadurch wird das Kästchen um 50 Pixel verschoben, dann um 45 Grad gedreht und dann um 100 Pixel verschoben.

Das dritte Kästchen ist auf animation-composition: accumulate gesetzt. In der Endposition wird translateX(100px) mathematisch zu translateX(50px) aus der ursprünglichen Transformation addiert, was zu einer Transformation von translateX(150px) rotate(45deg) führt.