Geef op hoe meerdere animatie-effecten moeten worden gecombineerd met animatiecompositie

Vervangen, toevoegen of accumuleren? Dat is de vraag.

Bramus

Het combineren van meerdere animatie-effecten

Met de eigenschap animation-composition kunt u bepalen wat er moet gebeuren als 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);
  }
}

Wanneer deze keyframes op een element worden toegepast, vervangt de transform in het keyframe to 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 opgeteld bij de onderliggende waarde.
• accumulate : De effectwaarde wordt gecombineerd met de onderliggende waarde.

Het verschil tussen optelling en accumulatie is subtiel. Neem bijvoorbeeld de twee waarden blur(2) en blur(3) . Bij elkaar opgeteld zou dit blur(2) blur(3) opleveren, maar bij optelling zou dit blur(5) opleveren.

Je zou dit kunnen vergelijken met een kopje dat gevuld is met thee. Als je er melk in giet, gebeurt dit:

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

Demo

In de onderstaande demo zijn er drie grijze vakken waarop die transform en animation zijn toegepast.

Hoewel deze vakken 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 translateX(50px) rotate(45deg) waarde voor transform eenvoudigweg vervangen door translateX(100px) .

Het tweede vak is ingesteld op animation-composition: add . In de eindpositie wordt de translateX(100px) toegevoegd aan de originele translateX(50px) rotate(45deg) , wat resulteert in translateX(50px) rotate(45deg) translateX(100px) . Hiermee wordt de doos 50 px verplaatst, vervolgens 45 graden gedraaid en vervolgens 100 px verplaatst.

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

Foto door Alex Boyd op Unsplash