Bireysel dönüşüm özellikleriyle CSS dönüşümleri üzerinde daha ince taneli kontrol

CSS transform mülk #

Bir öğeye dönüşümler uygulamak için, CSS transform Mülk. Tesis bir veya daha fazla kabul eder. &LTtransform-function>birbiri ardına uygulanan s.

.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}

Hedeflenen öğe, X ekseninde %50 çevrilir, 30 derece döndürülür ve son olarak %120’ye kadar ölçeklendirilir.

iken transform property işini gayet iyi yapıyor, bu değerlerden herhangi birini ayrı ayrı değiştirmek istediğinizde biraz sıkıcı oluyor.

Fareyle üzerine gelindiğinde ölçeği değiştirmek için, değerleri değişmeden kalsa da transform özelliğindeki tüm işlevleri çoğaltmanız gerekir.

.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

Bireysel dönüşüm özellikleri #

Chrome 104 ile gönderim, CSS dönüşümleri için ayrı özelliklerdir. özellikler scale, rotateVe translatebir dönüşümün bu kısımlarını ayrı ayrı tanımlamak için kullanabilirsiniz.

Bunu yaparak Chrome, bu özellikleri zaten destekleyen Firefox ve Safari’ye katılır.

Öncekini yeniden yazmak transform bireysel özelliklere örnek olarak, snippet’iniz şu olur:

.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}

Sipariş önemlidir #

Orijinal CSS arasındaki önemli bir fark transform özellik ve yeni özellikler, bildirilen dönüşümlerin uygulanma sırasıdır.

İle transformdönüştürme işlevleri yazıldıkları sırayla – soldan (dıştan) sağa (içten) uygulanır.

Bireysel dönüştürme özellikleriyle sıra, beyan edildikleri sıra değildir. Sıra her zaman aynıdır: ilk translate (dışarıda), sonra rotateve daha sonra scale (içeri).

Bu, aşağıdaki kod parçacıklarının her ikisinin de aynı sonucu verdiği anlamına gelir:

.transform--individual {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.transform--individual-alt {
rotate: 30deg;
translate: 50% 0;
scale: 1.2;
}

Her iki durumda da hedeflenen öğeler önce şu şekilde çevrilir: 50% X ekseni üzerinde, ardından döndürülen 30degve son olarak şuna göre ölçeklendirildi: 1.2.

Bireysel dönüşüm özelliklerinden biri ile birlikte bildirilirse transform özellik, ardından bireysel dönüşümler önce uygulanır (translate, rotateve daha sonra scale) ile transform son (iç). Daha fazla ayrıntı, tanımlayan spesifikasyondadır. dönüşüm matrisi nasıl hesaplanmalıdır.

animasyonlar #

Bu özelliklerin eklenmesinin ana nedeni, animasyonları kolaylaştırmaktır. Bir öğeyi aşağıdaki gibi canlandırmak istediğinizi varsayalım:

kullanma transform #

Bu animasyonu kullanarak uygulamak için transform, tanımlanmış tüm dönüşümler için tüm aradaki değerleri hesaplamanız ve bunları her anahtar kareye dahil etmeniz gerekir. Örneğin, %10 işaretinde bir dönüş yapmak için, diğer dönüşümlerin değerleri de hesaplanmalıdır, çünkü transform mülkün hepsine ihtiyacı var.

Ortaya çıkan CSS kodu şu olur:

@keyframes anim {
0% { transform: translateX(0%); }
5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
100% { transform: translateX(100%) rotate(360deg); }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}

Bireysel dönüştürme özelliklerini kullanma #

Bireysel dönüştürme özellikleriyle bunu yazmak çok daha kolay hale gelir. Tüm dönüşümleri anahtar kareden anahtar kareye sürüklemek yerine her dönüşümü ayrı ayrı hedefleyebilirsiniz. Ayrıca artık tüm bu aradaki değerleri hesaplamanıza gerek yok.

@keyframes anim {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: anim 2s;
animation-fill-mode: forwards;
}

Bireysel dönüştürme özelliklerini ve birkaç ana kareyi kullanma #

Kodunuzu modüler hale getirmek için her bir alt animasyonu kendi anahtar karelerine bölebilirsiniz.

@keyframes move {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
}
@keyframes scale {
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
}
@keyframes rotate {
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
.target {
animation: move 2s, scale 2s, rotate 2s;
animation-fill-mode: forwards;
}

Bu bölme sayesinde, her bir ayrı anahtar kare setini istediğiniz gibi uygulayabilirsiniz, çünkü transform artık bireysel özellikler haline gelen özellikler artık birbirinin üzerine yazmıyor. Bunun üzerinde, tüm partiyi yeniden yazmaya gerek kalmadan her dönüşüme farklı bir zamanlama verebilirsiniz.

Verim #

Bu yeni özellikleri kullanan animasyonlar, mevcut özelliklerin animasyonları kadar verimlidir. transform mülk.

animasyonları translate, rotateVe scale birleştirici üzerinde animasyonlarla aynı şekilde çalıştırın transform yapın, böylece animasyon performansı için şu şekilde iyidirler: transform dır-dir.

Bu yeni özellikler aynı zamanda will-change mülk. Genel olarak, aşırı kullanımdan kaçınmak en iyisidir will-change gerekli olan minimum sayıda eleman üzerinde ve makul olarak mümkün olduğu kadar kısa bir süre için kullanarak. Ancak mümkün olduğunca spesifik olmak da iyidir. Örneğin, kullanıyorsanız will-change ile bir animasyonu optimize etmek için rotate Ve filter özellikler, bunu kullanarak bildirmelisiniz will-change: rotate, filter. Bu, kullanmaktan biraz daha iyidir will-change: transform, filter animasyon yaptığınız bir durumda rotate Ve filterçünkü kullandığınızda Chrome’un önceden oluşturduğu bazı veri yapıları will-change için farklıdır transform e karşı rotate.