Łączenie wielu efektów animacji za pomocą właściwości animation-composition

Bramus

Właściwość animation-composition umożliwia kontrolowanie tego, co ma się stać, gdy wiele animacji jednocześnie wpływa na tę samą właściwość.

Załóżmy, że do elementu zastosowano tę podstawową transformację:

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

Załóżmy też, że masz ten zestaw klatek kluczowych:

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

Gdy zastosujesz te klatki kluczowe do elementu, właściwość transform w klatce kluczowej to zastąpi istniejącą właściwość transform. Jest to zachowanie domyślne.

Dzięki właściwości animation-composition możesz teraz kontrolować, co ma się stać zamiast domyślnego działania replace. Akceptowane wartości:

• replace: wartość efektu zastępuje wartość bazową. (domyślna)
• 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 subtelna. Weźmy na przykład 2 wartości: blur(2) i blur(3). Po dodaniu do siebie dadzą one blur(2) blur(3), ale po akumulacji dadzą blur(5).

Możesz to porównać do filiżanki wypełnionej herbatą. Gdy wlejesz do niej mleko, stanie się to:

• replace: herbata zostanie usunięta i zastąpiona mlekiem.
• add: mleko zostanie dodane do filiżanki, ale pozostanie na wierzchu herbaty.
• accumulate: mleko zostanie dodane do herbaty i, ponieważ oba są płynami, dobrze się wymieszają.

Prezentacja

W prezentacji znajdują się 3 szare pola, do których zastosowano podstawową właściwość transform i animation.

Mimo że te pola mają tę samą animację, dają inny wynik, ponieważ mają ustawioną inną właściwość animation-composition:

Pierwsze pole ma ustawioną właściwość animation-composition: replace. Jest to zachowanie domyślne. W pozycji końcowej pierwotna wartość translateX(50px) rotate(45deg) właściwości transform zostanie zastąpiona wartością translateX(100px).

Drugie pole ma ustawioną właściwość animation-composition: add. W pozycji końcowej wartość translateX(100px) zostanie dodana do pierwotnej wartości translateX(50px) rotate(45deg), co da wartość translateX(50px) rotate(45deg) translateX(100px). Spowoduje to przesunięcie pola o 50 pikseli, obrócenie go o 45 stopni, a następnie przesunięcie o 100 pikseli.

Trzecie pole ma ustawioną właściwość animation-composition: accumulate. W pozycji końcowej wartość translateX(100px) zostanie matematycznie dodana do wartości translateX(50px) z pierwotnej transformacji, co da transformację translateX(150px) rotate(45deg).