Combineer meerdere animatie-effecten met animatiecompositie.

Bramus

Met de eigenschap animation-composition kunt u bepalen wat er moet gebeuren wanneer meerdere animaties tegelijkertijd dezelfde eigenschap beïnvloeden.

Stel dat je deze basistransformatie op een element hebt toegepast:

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

En dat je ook deze set keyframes hebt:

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

Bij het toepassen van deze keyframes op een element vervangt de transform in het to keyframe de bestaande transform . Dit is het standaardgedrag.

Met animation-composition heb je nu controle over wat er moet gebeuren in plaats van de standaard replace . Geaccepteerde waarden zijn:

• replace : De effectwaarde vervangt de onderliggende waarde. (standaard)
• add : De effectwaarde wordt bij de onderliggende waarde opgeteld.
• accumulate : De effectwaarde wordt gecombineerd met de onderliggende waarde.

Het verschil tussen optellen en accumuleren is subtiel. Neem bijvoorbeeld de twee waarden blur(2) en blur(3) . Als je ze bij elkaar optelt, krijg je blur(2) blur(3) , maar als je ze accumuleert, krijg je blur(5) .

Je kunt dit vergelijken met een kopje thee. Als je er melk in giet, gebeurt er dit:

• replace : De thee wordt verwijderd en vervangen door melk.
• add : De melk wordt aan het kopje toegevoegd, maar blijft als een laagje bovenop de thee liggen.
• accumulate : De melk wordt aan de thee toegevoegd en, omdat het allebei vloeistoffen zijn, mengen ze zich goed.

Demo

In de demo zijn drie grijze vakjes te zien waarop die transform en animation zijn toegepast.

Hoewel deze dozen dezelfde animatie hebben, leveren ze een ander resultaat op omdat ze een andere animation-composition hebben:

Het eerste vakje is ingesteld op animation-composition: replace . Dit is het standaardgedrag. In de eindpositie wordt de oorspronkelijke waarde translateX(50px) rotate(45deg) voor transform vervangen door translateX(100px) .

De tweede box is ingesteld op animation-composition: add . In de eindpositie wordt translateX(100px) toegevoegd aan de originele translateX(50px) rotate(45deg) , wat resulteert in translateX(50px) rotate(45deg) translateX(100px) . Dit verplaatst de box met 50px, draait hem vervolgens 45 graden en verplaatst hem daarna nog eens 100px.

Het derde vakje is ingesteld op animation-composition: accumulate . In de eindpositie wordt de translateX(100px) wiskundig opgeteld bij de translateX(50px) van de oorspronkelijke transformatie, wat resulteert in een transformatie van translateX(150px) rotate(45deg) .