Sostituire, aggiungere o accumulare i dati? Questo è il punto.
Combinare più effetti di animazione
La proprietà animation-composition consente di controllare cosa deve accadere quando più animazioni influiscono contemporaneamente sulla stessa proprietà.
Supponi di avere applicato questa trasformazione di base a un elemento:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
Inoltre, 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 l'elemento transform esistente. Questo è il comportamento predefinito.
Con animation-composition, ora hai il controllo su cosa dovrebbe accadere al posto dell'replace predefinito. I valori accettati sono:
replace: il valore dell'effetto sostituisce il valore sottostante. (valore predefinito)add: il valore dell'effetto viene aggiunto al valore sottostante.accumulate: il valore dell'effetto viene combinato con il valore di base.
La differenza tra addizione e accumulo è minima. Ad esempio, prendi i due valori blur(2) e blur(3). Se sommata, la somma produrrà blur(2) blur(3), mentre se cumulata produrrebbe blur(5).
Puoi paragonarlo a una tazza piena di tè. Ecco cosa accade se si versa il latte:
replace: il tè viene rimosso e viene sostituito dal latte.add: il latte viene aggiunto alla tazza, ma rimane sovrapposto al tè.accumulate: il latte viene aggiunto al tè e, poiché sono entrambi fluidi, amalgamare bene.
Demo
Nella demo qui sotto sono presenti tre caselle grigie a cui sono applicate le basi transform e animation.
Anche se questi riquadri hanno la stessa animazione, generano un risultato diverso perché hanno un insieme di animation-composition diverso:
La prima casella è impostata su animation-composition: replace. Questo è il comportamento predefinito. Nella posizione finale, il valore translateX(50px) rotate(45deg) originale per transform viene semplicemente sostituito da translateX(100px).
La seconda casella è impostata su animation-composition: add. Nella posizione finale, translateX(100px) viene aggiunto alla translateX(50px) rotate(45deg) originale, ottenendo così translateX(50px) rotate(45deg) translateX(100px). Questo sposta la casella di 50 px, quindi la gira di 45 px e poi la sposta di 100 px.
La terza casella è impostata su animation-composition: accumulate. Nella posizione finale, translateX(100px) verrà aggiunto matematicamente alla translateX(50px) dalla trasformazione originale, generando una trasformazione di translateX(150px) rotate(45deg).