CSS animasyonlu ızgara düzenleri

CSS Grid'de grid-template-columns ve grid-template-rows özellikleri, sırasıyla satır adlarını tanımlamanıza ve ızgara sütunlarının ve satırlarının boyutunu izlemenize olanak tanır. Bu özellikler için kesme noktasını desteklemek, ızgara düzenlerinin bir animasyonun veya geçişin yarı noktasında sabitlenmek yerine, durumlar arasında sorunsuz bir şekilde geçiş yapmasına olanak tanır.

Tarayıcı desteği

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

CSS'de transition özelliğini kullanarak mülkleri bir değerden diğerine sorunsuz bir şekilde geçirebilirsiniz.

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

#target:hover {
  opacity: 1;
}

Oluşturma motoru, hedeflenen mülkün değerinin türünü otomatik olarak algılar ve yeni değere sorunsuz bir şekilde geçiş yapmak için bu bilgileri kullanır.

Örneğin:

  • opacity0'ten 1'ye mi geçiriyorsunuz? Bu, sayısal bir enterpolasyondur.
  • background-colorwhite'ten black'ye mi geçiriyorsunuz? Kaynak ve hedef renkler arasında geçiş yapın.
  • width'e geçiş mi yapıyorsunuz? Gerekirse birim dönüştürerek sayısal olarak enterpolasyon yapın.

Aynı durum, tarayıcının animasyon kareleri arasında değer enterpolasyonu yapacağı CSS animasyonları için de geçerlidir.

grid-template-columns ve grid-template-rows için animasyon ekleme

Ayrıca, ızgara düzenleri bir animasyonun veya geçişin ortasında sabitlenmek yerine, durumlar arasında sorunsuz bir şekilde geçiş yapabilir.

Aşağıdaki demoda, çeşitli avatarların gösterildiği bir ızgara yer almaktadır. Alandan tasarruf etmek için her sütunun genişliği grid-template-columns kullanılarak sınırlandırılarak avatarlar birbirinin üzerine yerleştirilir. Fareyle üzerine gelindiğinde her sütuna daha fazla yer 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);
}

transition özelliği uygulandığında ızgara, değerler arasında sorunsuz bir şekilde ara değer oluşturur.

Bu etki, grid-template-columns veya grid-template-rows değerlerini değiştiren animasyonlar için de geçerlidir.