Zamienić, dodać czy wykorzystać? I o to chodzi.
Łączenie wielu efektów animacji
Właściwość animation-composition pozwala kontrolować, co ma się stać, jeśli na tę samą właściwość wpływa jednocześnie wiele animacji.
Załóżmy, że do elementu stosujesz to przekształcenie podstawowe:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
A do tego mamy ten zestaw klatek kluczowych:
@keyframes adjust {
to {
transform: translateX(100px);
}
}
Gdy zastosujesz te klatki kluczowe do elementu, transform w klatce kluczowej to zastąpi dotychczasowy element transform. Jest to jego ustawienie domyślne.
Dzięki animation-composition zamiast domyślnego replace masz kontrolę nad tym, co ma się stać. Akceptowane wartości to:
replace: wartość efektu zastępuje wartość bazową. (domyślnie)add: wartość efektu jest dodawana do wartości bazowej.accumulate: wartość efektu jest łączona z wartością bazową.
Różnica między dodawaniem a akumulacją jest niewielka. Weź na przykład 2 wartości blur(2) i blur(3). Po zsumowaniu daje wynik blur(2) blur(3), a po zsumowaniu daje blur(5).
Możesz porównać to do filiżanki napełnionej herbatą. Gdy nalewa się mleko, dzieje się tak:
replace: herbata zostaje usunięta i zastąpiona mlekiem.add: mleko dodaje się do filiżanki, ale pozostaje nałożone na herbatę.accumulate: mleko dodaje się do herbaty, a ponieważ oba produkty są płynami, dobrze się mieszają.
Demonstracyjny
W poniższej wersji demonstracyjnej widać 3 szare pola, do których zastosowano te wartości (transform i animation).
Mimo że te pola mają taką samą animację, dają inny wynik, ponieważ mają inny zbiór animation-composition:
Pierwsze pole jest ustawione na animation-composition: replace. Jest to jego ustawienie domyślne. Na pozycji końcowej pierwotna wartość translateX(50px) rotate(45deg) dla transform została po prostu zastąpiona przez translateX(100px).
Drugie pole jest ustawione na animation-composition: add. W pozycji końcowej parametr translateX(100px) jest dodawany do pierwotnego elementu translateX(50px) rotate(45deg), co daje translateX(50px) rotate(45deg) translateX(100px). Pole przesuwa się o 50 pikseli, następnie o 45 stopni i przesuwa się o 100 pikseli.
Trzecie pole jest ustawione na animation-composition: accumulate. W pozycji końcowej translateX(100px) zostanie matematycznie dodana do parametru translateX(50px) z oryginalnej przekształcenia, co spowoduje przekształcenie o wartości translateX(150px) rotate(45deg).