Animasyon düzeniyle birden fazla animasyon efektini birleştirme

Bramus

animation-composition özelliği, birden fazla animasyon aynı özelliği aynı anda etkilediğinde ne olacağını kontrol etmenizi sağlar.

Bir öğeye şu temel dönüşümü uyguladığınızı varsayalım:

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

Ayrıca şu anahtar kareler grubuna da sahip olduğunuzu varsayalım:

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

Bu animasyon kareleri bir öğeye uygulandığında, to animasyon karesindeki transform mevcut transform yerine geçer. Bu, varsayılan davranıştır.

animation-composition ile artık varsayılan replace yerine ne olacağını kontrol edebilirsiniz. Kabul edilen değerler şunlardır:

• replace: Efekt değeri, temel değerin yerini alır. (varsayılan)
• add: Efekt değeri, temel değere eklenir.
• accumulate: Efekt değeri, temel değerle birleştirilir.

Toplama ve biriktirme arasındaki fark incedir. Örneğin, blur(2) ve blur(3) değerlerini ele alalım. Birlikte eklendiğinde blur(2) blur(3), biriktiğinde ise blur(5) üretir.

Bunu çay dolu bir fincanla karşılaştırabilirsiniz. İçine süt döküldüğünde şu durumlar yaşanır:

• replace: Çay kaldırılır ve yerine süt eklenir.
• add: Süt fincana eklenir ancak çayın üzerinde katman halinde kalır.
• accumulate: Süt çaya eklenir ve her ikisi de sıvı olduğu için güzelce karışır.

Demo

Demoda, temel transform ve animation simgelerinin uygulandığı üç gri kutu var.

Bu kutular aynı animasyona sahip olsa da farklı animation-composition kümesine sahip oldukları için farklı sonuçlar verir:

İlk kutu animation-composition: replace olarak ayarlanır. Bu, varsayılan davranıştır. Son konumunda, transform için orijinal translateX(50px) rotate(45deg) değeri translateX(100px) ile değiştirilir.

İkinci kutu animation-composition: add olarak ayarlanır. Son konumunda, translateX(100px), orijinal translateX(50px) rotate(45deg) öğesine eklenerek translateX(50px) rotate(45deg) translateX(100px) elde edilir. Bu işlem, kutuyu 50 piksel hareket ettirir, ardından 45 derece döndürür ve 100 piksel daha hareket ettirir.

Üçüncü kutu animation-composition: accumulate olarak ayarlanır. Son konumunda translateX(100px), orijinal dönüşümdeki translateX(50px) değerine matematiksel olarak eklenir ve translateX(150px) rotate(45deg) dönüşümü elde edilir.