Animaciones aditivas en CSS

Daniel C. Wilson explica cómo con @keyframelas animaciones CSS, cuando se aplican varias de ellas a un elemento, ambas funcionan. Pero si se repite alguna propiedad, sólo funciona la última. Se anulan unos a otros. He visto superar esta limitación aplicando fotogramas clave a elementos anidados para que no tengas que lidiar con esas peleas.

Pero la API de animación web (WAAPI) en JavaScript tiene una forma de realizar animaciones aditivas. Es cuestión de ir añadiendo composite: "add"opciones. Por ejemplo:

Lo mismo ocurre con mover un elemento 20px + 30px con margen izquierdo (no es la forma más eficaz de mover un objeto, pero demuestra el uso de longitud)… si ambas animaciones se ejecutan al mismo tiempo, con la misma duración y en la misma dirección. , el resultado final será un movimiento de 50px .

Fresco. Eso es bueno para las animaciones de JavaScript, pero ¿qué pasa con CSS? ¿Lo conseguiremos algún día? Tal vez . Incluso ahora, puedes aplicar animaciones aditivas a tus animaciones CSS existentes con solo una línea de JavaScript:

el.getAnimations().forEach(animation = {  animation.effect.composite = 'add';});

Me recuerda un poco a las casillas de verificación indeterminadas . Existen, pero no hay forma de expresarlos en HTML o CSS; debes ponerlos en ese estado a través de JavaScript.