Geben Sie an, wie mehrere Animationseffekte mit Animationszusammensetzung zusammengesetzt werden sollen

Ersetzen, hinzufügen oder ansammeln? Wer weiß...

Bramus

Mehrere Animationseffekte kombinieren

Mit der Eigenschaft animation-composition können Sie festlegen, 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);

Außerdem haben Sie diese Keyframes:

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

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

Mit animation-composition haben Sie jetzt die Möglichkeit, festzulegen, was anstelle der Standardaktion 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 beispielsweise die beiden Werte blur(2) und blur(3). Zusammen ergeben sie blur(2) blur(3), kumuliert ergeben sie blur(5).

Das lässt sich 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. Da beide Flüssigkeiten sind, vermischen sie sich gut.

Demo

Im folgenden Demo sind drei graue Kästen zu sehen, auf die die Basis transform und animation angewendet wurde.

Obwohl diese Felder dieselbe Animation haben, führen sie zu einem anderen Ergebnis, da sie einen anderen animation-composition-Satz haben:

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

Das zweite Feld ist auf animation-composition: add gesetzt. In der Endposition wird translateX(100px) zum ursprünglichen translateX(50px) rotate(45deg) addiert, was translateX(50px) rotate(45deg) translateX(100px) ergibt. Dadurch wird das Rechteck um 50 px verschoben, dann um 45° gedreht und dann um 100 px verschoben.

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

Foto von Alex Boyd auf Unsplash