CSS Animasyonlu Izgara Düzenleri

CSS ızgarasında grid-template-columns ve grid-template-rows özellikleri, sırasıyla çizgi adları tanımlama ve ızgara sütunları ile satırlarının boyutlarını izleme olanağı sağlar. Bu özelliklerin interpolasyonunun desteklenmesi, ızgara düzenlerinin bir animasyonun veya geçişin orta noktasına tutturmak yerine durumlar arasında sorunsuz bir şekilde geçiş yapmasını sağlar.

Bramus

Tarayıcı Desteği

  • 107
  • 107
  • 66
  • 16

CSS'de Değer İnterpolasyonu

CSS'de transition özelliğini kullanarak özellikleri bir değerden diğerine sorunsuzca 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ğer 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:

  • opacity, 0 hesabından 1 adlı kuruluş birimine geçirilsin mi? Bu, sayısal bir interpolasyondur.
  • background-color, white hesabından black adlı kuruluş birimine geçirilsin mi? Kaynak ve hedef renkler arasında geçiş yapar.
  • width geçişi yapılıyor mu? Sayısal olarak interpolasyon yapın, gerektiğinde birimleri dönüştürün.

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

grid-template-columns ve grid-template-rows interpolasyonu

Microsoft'taki katkıda bulunan kullanıcılarımız sayesinde, sürüm 107'den itibaren Chrome grid-template-columns ve grid-template-rows değerlerini ara bulabiliyor.

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

Aşağıdaki demoda birkaç avatar gösterilmektedir. Alandan tasarruf etmek amacıyla avatarlar, her sütunun genişliği grid-template-columns ile sınırlanarak üst üste yerleştirilir. 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);
}

transition özelliği kullanıldığında, tablo değerler arasında düzgün bir arabuluculuk yapar.

Bu efekt, grid-template-columns veya grid-template-rows değerlerini değiştiren animasyonlara da uygulanır.

Yeni birlikte çalışabilirlik serisinin kapsamında