Specifica la modalità di composizione di più effetti di animazione con la composizione dell'animazione

Sostituire, aggiungere o accumulare? Questo è il punto.

Bramus

Combinare più effetti di animazione

La proprietà animation-composition consente di controllare cosa deve succedere quando più animazioni influiscono contemporaneamente sulla stessa proprietà.

Supponiamo di aver applicato questa trasformazione di base a un elemento:

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

E che hai anche questo insieme di fotogrammi chiave:

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

Quando applichi questi fotogrammi chiave a un elemento, il transform nel fotogramma chiave to sostituisce il transform esistente. Questo è il comportamento predefinito.

Con animation-composition, ora hai il controllo su cosa deve succedere invece di replace predefinito. I valori accettati sono:

• replace: il valore dell'effetto sostituisce il valore sottostante. (predefinito)
• add: il valore dell'effetto viene aggiunto al valore sottostante.
• accumulate: il valore dell'effetto viene combinato con il valore sottostante.

La differenza tra aggiunta e accumulo è sottile. Ad esempio, prendi i due valori blur(2) e blur(3). Se sommati, questi valori produrrebbero blur(2) blur(3), ma se accumulati produrrebbero blur(5).

Puoi paragonarlo a una tazza piena di tè. Quando versi il latte, si verifica quanto segue:

• replace: il tè viene rimosso e sostituito dal latte.
• add: il latte viene aggiunto alla tazza, ma rimane a strati sopra il tè.
• accumulate: Il latte viene aggiunto al tè e, poiché entrambi sono liquidi, si mescolano bene.

Demo

Nella demo riportata di seguito, sono presenti tre caselle grigie a cui sono stati applicati transform e animation di base.

Anche se queste caselle hanno la stessa animazione, producono un risultato diverso perché hanno un animation-composition diverso:

La prima casella è impostata su animation-composition: replace. Questo è il comportamento predefinito. Nella posizione finale, il valore originale translateX(50px) rotate(45deg) per transform viene semplicemente sostituito da translateX(100px).

La seconda casella è impostata su animation-composition: add. Nella posizione finale, il translateX(100px) viene aggiunto al translateX(50px) rotate(45deg) originale, ottenendo translateX(50px) rotate(45deg) translateX(100px). La casella viene spostata di 50 px, ruotata di 45 gradi e poi spostata di 100 px.

La terza casella è impostata su animation-composition: accumulate. Nella posizione finale, translateX(100px) verrà aggiunto matematicamente a translateX(50px) dalla trasformazione originale, con conseguente trasformazione di translateX(150px) rotate(45deg).

Foto di Alex Boyd su Unsplash