Ersetzen, hinzufügen oder akkumulieren? Wer weiß...
Mehrere Animationseffekte kombinieren
Mit der Eigenschaft animation-composition kann gesteuert werden, was geschehen 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 sind folgende Keyframes vorhanden:
@keyframes adjust {
to {
transform: translateX(100px);
}
}
Wenn Sie diese Keyframes auf ein Element anwenden, ersetzt das transform im Keyframe to das vorhandene transform. Das ist das Standardverhalten.
Mit animation-composition hast du jetzt die Kontrolle darüber, was passieren soll, und nicht die standardmäßige replace. Zulässige Werte sind:
replace: Der Wert für die Auswirkung ersetzt den zugrunde liegenden Wert. (Standardeinstellung)add: Der Wert für die Auswirkung wird dem zugrunde liegenden Wert hinzugefügt.accumulate: Der Wert der Auswirkung wird mit dem zugrunde liegenden Wert kombiniert.
Der Unterschied zwischen Addition und Akkumulation ist subtil. Nehmen wir beispielsweise die beiden Werte blur(2) und blur(3). Bei Addition ergibt sich blur(2) blur(3), summiert jedoch blur(5).
Man kann das mit einer Tasse mit Tee vergleichen. Wenn Milch darin eingegossen wird, passiert Folgendes:
replace: Der Tee wird entfernt und durch die Milch ersetzt.add: Die Milch wird in die Tasse gegeben, bleibt aber auf dem Tee geschichtet.accumulate: Die Milch wird dem Tee hinzugefügt und da beide Flüssigkeiten sind, vermischen sie sich gut.
Demo
In der Demo unten sehen Sie drei graue Felder, auf die die Basis transform und animation angewendet werden.
Obwohl diese Felder dieselbe Animation haben, führen sie zu einem anderen Ergebnis, da sie unterschiedliche animation-composition-Werte enthalten:
Das erste Feld ist auf animation-composition: replace festgelegt. Das ist das Standardverhalten. An seiner 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. An seiner Endposition wird der translateX(100px) zur ursprünglichen translateX(50px) rotate(45deg) hinzugefügt, d. h., er führt zu translateX(50px) rotate(45deg) translateX(100px). Dadurch wird der Rahmen um 50 Pixel, anschließend um 45 Grad und anschließend um 100 Pixel verschoben.
Das dritte Feld ist auf animation-composition: accumulate festgelegt. An 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.