Tata Letak Petak Animasi CSS

Di Petak CSS, properti grid-template-columns dan grid-template-rows memungkinkan Anda menentukan nama garis serta melacak ukuran kolom dan baris petak. Mendukung interpolasi untuk properti ini memungkinkan tata letak petak agar bertransisi dengan lancar antar-status, bukan mengepaskan pada titik tengah animasi atau transisi.

Bramus

Dukungan Browser

  • 107
  • 107
  • 66
  • 16

Jenis 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:

  • Mentransisi opacity dari 0 ke 1? Hal ini adalah interpolasi numerik.
  • Mentransisi background-color dari white ke black? Memudar antara warna sumber dan target.
  • Mentransisikan width? Menginterpolasi secara numerik, mengonversi satuan sepanjang jalan jika diperlukan.

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

Melakukan interpolasi grid-template-columns dan grid-template-rows

Berkat kontributor kami di Microsoft, Chrome–mulai versi 107–dapat menginterpolasi nilai grid-template-columns dan grid-template-rows.

Tata letak petak dapat bertransisi dengan lancar antar-status, alih-alih mengencangkan bagian tengah animasi atau transisi.

Dalam demo di bawah, 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 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 menerapkan properti transition, petak akan berinterpolasi di antara nilai dengan lancar.

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

Bagian dari Seri yang baru memiliki interoperabilitas