Tata letak petak animasi CSS

Bramus

Di CSS Grid, properti grid-template-columns dan grid-template-rows memungkinkan Anda menentukan nama baris dan ukuran jalur kolom dan baris petak. Mendukung interpolasi untuk properti ini memungkinkan tata letak petak bertransisi dengan lancar di antara status, bukan langsung beralih di titik tengah animasi atau transisi.

Browser Support

• 107
• 107
• 66
• 16

Interpolasi nilai di CSS

Di CSS, Anda dapat mentransisikan properti dengan lancar dari satu nilai ke nilai lainnya menggunakan properti transition.

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

#target:hover {
  opacity: 1;
}

Mesin rendering akan otomatis mendeteksi jenis nilai properti yang ditargetkan, dan menggunakan informasi tersebut untuk beralih ke nilai baru dengan lancar.

Contoh:

• Mentransisikan opacity dari 0 ke 1? Itu adalah interpolasi numerik.
• Mentransisikan background-color dari white ke black? Memudarkan warna sumber dan target.
• Melakukan transisi width? Lakukan interpolasi secara numerik, dengan mengonversi unit di sepanjang proses jika diperlukan.

Hal yang sama berlaku untuk animasi CSS, di mana browser akan melakukan interpolasi nilai di antara keyframe.

Catatan: Saat menggunakan Properti Kustom, gunakan @property untuk menunjukkan jenisnya. Dengan begitu, browser akan mengetahui cara melakukan transisi dari satu nilai ke nilai lainnya.

Menganimasikan grid-template-columns dan grid-template-rows

Tata letak petak juga dapat bertransisi dengan lancar di antara status, bukan langsung beralih di titik tengah animasi atau transisi.

Dalam demo berikut, petak menampilkan beberapa avatar. Untuk menghemat ruang, avatar diletakkan di atas satu sama lain dengan membatasi lebar setiap kolom menggunakan grid-template-columns. Saat kursor diarahkan, setiap kolom diberi lebih banyak ruang.

.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);
}

Dengan properti transition, petak akan berinterpolasi antarnilai dengan lancar.

Efek ini juga berlaku untuk animasi yang mengubah nilai grid-template-columns atau grid-template-rows.