Bagaimanakah Saya Boleh Mencapai Animasi Lancar dengan Berbilang Ciri Tersuai CSS?

Menggunakan Sifat Tersuai CSS untuk Animasi Lancar

Apabila cuba menghidupkan berbilang elemen serentak dengan sifat CSS tersuai, pengguna sering menghadapi masalah dengan perubahan sifat mendadak dan bukannya peralihan yang lancar. Artikel ini membincangkan penyelesaian untuk mencapai kesan animasi yang diingini.

Daripada bergantung pada pembolehubah, yang tidak menginterpolasi nilai dalam animasi, pendekatan yang lebih berkesan ialah menggunakan sifat CSS yang ditakrifkan menggunakan @property. Kaedah ini membenarkan pengisytiharan jenis harta secara eksplisit, membolehkan penyemak imbas mentafsir dan menghidupkan sifat seperti --opacity sebagai nombor dengan tepat.

Contoh Pelaksanaan

Untuk menunjukkan teknik ini, pertimbangkan kod berikut:

@property --opacity {
  syntax: '<number>'; /* Declaring type as 'number' for transition */
  initial-value: 0;
  inherits: false;
}

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

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

Dalam contoh ini, --sifat tersuai opacity ditakrifkan sebagai @property dengan jenis 'nombor'. Ini membolehkan penyemak imbas mengenali --opacity sebagai nilai berangka dan menginterpolasinya dengan lancar semasa animasi. Animasi bingkai kunci fadeIn kemudiannya meningkat secara beransur-ansur --kelegapan daripada 0 kepada 1 pada tanda 50%, menghasilkan kesan fade-in yang lancar untuk warna latar belakang elemen html.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Animasi Lancar dengan Berbilang Ciri Tersuai CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!