Bagaimanakah Saya Boleh Menghidupkan Sifat Tersuai CSS untuk Menunjukkan/Menyembunyikan Berbilang Elemen Secara Berurutan?

Menganimasikan Sifat/Pembolehubah Tersuai CSS

Masalah:

Mengnimasikan berbilang elemen dengan sifat tersuai CSS (pembolehubah) bukanlah' t berfungsi seperti yang diharapkan. Hasil yang diingini ialah div dalam muncul dan hilang dalam urutan menggunakan pembolehubah untuk mengawal kelegapan.

Penyelesaian:

Sifat CSS dengan Jenis Tersuai:

Perkenalkan jenis tersuai untuk pembolehubah menggunakan @property, yang membolehkan penyemak imbas memahami jenis data pembolehubah dan dayakan animasi beransur-ansur:

@property --opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

Animasi dengan Harta Tersuai:

Gunakan sifat tersuai dalam bingkai utama animasi:

@keyframes fadeIn {
  50% {--opacity: 1}
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

Dalam contoh ini, latar belakang elemen html dianimasikan daripada telus sepenuhnya kepada separa legap berdasarkan pembolehubah --opacity, yang diinterpolasi secara beransur-ansur dari semasa ke semasa.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Sifat Tersuai CSS untuk Menunjukkan/Menyembunyikan Berbilang Elemen Secara Berurutan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!