CSS Animasyonlu Izgara Düzenleri

CSS’de Değer Enterpolasyonu #

CSS’de özellikleri bir değerden diğerine yumuşak bir şekilde geçiş yapabilirsiniz. transition mülk.

#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}

Oluşturma motoru, hedeflenen özelliğin değerinin türünü otomatik olarak algılar ve bu bilgiyi sorunsuz bir şekilde yeni değere geçmek için kullanır.

Örneğin:

• geçiş opacity itibaren 0 ile 1? Bu sayısal bir enterpolasyon.
• geçiş background-color itibaren white ile black? Kaynak ve hedef renkler arasında geçiş yapın.
• geçiş width? Gerekirse yol boyunca birimleri dönüştürerek sayısal olarak enterpolasyon yapın.

Aynısı, tarayıcının ana kareler arasında değer enterpolasyonu yapacağı CSS animasyonları için de geçerlidir.

enterpolasyon grid-template-columns Ve grid-template-rows #

Microsoft’taki katkıda bulunanlarımız sayesinde Chrome, sürüm 107’den itibaren enterpolasyon yapabilmektedir. grid-template-columns Ve grid-template-rows değerler.

Izgara düzenleri, bir animasyonun veya geçişin orta noktasında yakalamak yerine, durumlar arasında sorunsuz bir şekilde geçiş yapabilir.

Aşağıdaki demoda bir ızgara birkaç avatar gösteriyor. Alandan tasarruf etmek için, her bir sütunun genişliğini kullanarak avatarlar üst üste yerleştirilir. grid-template-columns. Fareyle üzerine gelindiğinde, her sütuna daha fazla alan verilir.

.avatars {
display: grid;
gap: 0.35em;
grid-auto-flow: column;
grid-template-columns: repeat(4, 2em);
transition: all ease-in-out 0.25s;
}
.avatars:hover {
grid-template-columns: repeat(4, 4em);
}

İle transition özelliği yerinde, ızgara, değerler arasında düzgün bir şekilde enterpolasyon yapar.

Bu efekt, görüntüyü değiştiren animasyonlar için de geçerlidir. grid-template-columns veya grid-template-rows değerler.

fotoğrafı çeken Ernest Ojeh Açık Unsplash