Daniel C. Wilson erklärt, wie bei CSS @keyframe-Animationen, wenn mehrere davon auf ein Element angewendet werden, beide funktionieren. Wenn jedoch Eigenschaften wiederholt werden, funktioniert nur die letzte. Sie überschreiben sich gegenseitig. Ich habe gesehen, wie diese Einschränkung durch Anwendung von Keyframes auf verschachtelte Elemente überwunden wurde, sodass Sie sich nicht mit diesem Kampf auseinandersetzen müssen.
Aber die Web Animation API (WAAPI) in JavaScript bietet eine Möglichkeit für additive Animationen. Es ist eine Frage des Hinzufügens von composite: "add" zu den Optionen. Zum Beispiel
Dasselbe gilt für das Verschieben eines Elements um 20px + 30px mit linkem Rand (nicht der performanteste Weg, ein Objekt zu bewegen, aber es demonstriert die Längenverwendung)… wenn beide Animationen gleichzeitig, mit derselben Dauer und in derselben Richtung ausgeführt werden, wird das Endergebnis eine Bewegung von 50px sein.
Cool. Das ist schön für JavaScript-Animationen, aber was ist mit CSS? Werden wir es jemals bekommen? Vielleicht. Selbst jetzt können Sie additive Animationen mit nur einer Zeile JavaScript auf Ihre vorhandenen CSS-Animationen anwenden
el.getAnimations().forEach(animation => {
animation.effect.composite = 'add';
});Erinnert mich irgendwie an unbestimmte Checkboxen. Sie existieren, aber es gibt keine Möglichkeit, sie in HTML oder CSS auszudrücken – Sie müssen sie über JavaScript in diesen Zustand versetzen.