Birden fazla animasyon efektinin animasyon kompozisyonuyla nasıl birleştirileceğini belirtin

Değiştirme, ekleme veya biriktirme? Soru bu.

Bramus

Birden fazla animasyon efektini birleştirme

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

Bir öğeye şu temel dönüşümün uygulandığını 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. Bunlar birlikte eklendiğinde blur(2) blur(3), biriktirildiğinde ise blur(5) sonucunu verir.

Bunu, çay dolu bir bardağa benzetebilirsiniz. İçine süt döktüğünüzde ş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

Aşağıdaki demoda, temel transform ve animation biçimlendirmesinin uygulandığı üç gri kutu vardır.

Bu kutular aynı animasyona sahip olsa da farklı bir animation-composition kümesine sahip oldukları için farklı bir sonuç 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 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.

Alex Boyd tarafından Unsplash'te yayınlanan fotoğraf