Tata letak petak animasi CSS

Bramus

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

Interpolasi Nilai di CSS

Di CSS, Anda dapat melakukan transisi 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 bertransisi dengan lancar ke nilai baru.

Contoh:

• Bertransisi opacity dari 0 ke 1? Ini adalah interpolasi numerik.
• Bertransisi background-color dari white ke black? Pudar antara warna sumber dan target.
• Melakukan transisi width? Lakukan interpolasi secara numerik, dengan mengonversi unit di sepanjang jalan jika diperlukan.

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

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

Tata letak petak juga dapat melakukan transisi antar-status dengan lancar, bukan snap di titik tengah animasi atau transisi.

Dalam demo berikut, petak menampilkan beberapa avatar. Untuk menghemat ruang, avatar disusun di atas satu sama lain dengan membatasi lebar setiap kolom menggunakan grid-template-columns. Saat diarahkan kursor, setiap kolom akan 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 yang diterapkan, petak akan berinterpolasi antarnilai dengan lancar.

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