Değiştir mi, ekle mi yoksa biriktir mi? Sorumuz bu.
Birden fazla animasyon efektini birleştirme
animation-composition özelliği, birden fazla animasyon aynı anda aynı özelliği etkilediğinde ne olacağının kontrol edilmesini sağlar.
Bir öğeye aşağıdaki temel dönüşümün uygulandığını varsayalım:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
Ayrıca şu animasyon karelerine de sahip olduğunuzu unutmayın:
@keyframes adjust {
to {
transform: translateX(100px);
}
}
Bu animasyon kareleri bir öğeye uygulanırken to animasyon karesindeki transform, mevcut transform öğesinin yerini alır. Bu, varsayılan davranıştır.
animation-composition sayesinde, varsayılan replace yerine artık ne yapılacağı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: Etki değeri, temel değerle birleştirilir.
Toplama ve birikim arasındaki fark çok belirgin değildir. Örneğin, blur(2) ve blur(3) değerlerini ele alalım. Bu sayı toplandığında blur(2) blur(3) elde edilir, ancak toplandığında blur(5) olur.
Bunu çayla dolu bir fincanla karşılaştırabilirsiniz. İçine süt dökerken şu durum gerçekleşir:
replace: Çay çıkarılıp sütle değiştirilir.add: Süt bardağa eklenir ancak çayın üzerine katman olarak yerleştirilmiş olarak kalır.accumulate: Süt çaya eklenir ve her ikisi de sıvı olduğundan iyi bir şekilde karışır.
Demo
Aşağıdaki demoda, transform ve animation tabanlarının uygulandığı üç gri kutu var.
Bu kutular aynı animasyona sahip olsalar da farklı animation-composition kümelerine sahip oldukları için farklı sonuçlar verirler:
İlk kutu animation-composition: replace değerine ayarlanmış. Bu, varsayılan davranıştır. Bitiş konumunda, transform için orijinal translateX(50px) rotate(45deg) değeri translateX(100px) ile değiştirilir.
İkinci kutu animation-composition: add olarak ayarlanmıştır. Bitiş konumunda translateX(100px), orijinal translateX(50px) rotate(45deg) öğesine eklenir ve translateX(50px) rotate(45deg) translateX(100px) sonucunu elde eder. Bu işlem, kutuyu 50 piksel hareket ettirir, ardından 45 derece döndürür ve ardından 100 piksel taşır.
Üçüncü kutu animation-composition: accumulate değerine ayarlandı. Bitiş konumunda translateX(100px), orijinal dönüşümden translateX(50px) öğesine matematiksel olarak eklenir ve translateX(150px) rotate(45deg) dönüşümü sonucu elde edilir.