Mengapa Pembolehubah CSS Saya Tidak Beranimasi?

Animasikan Sifat/Pembolehubah Tersuai CSS

Dalam usaha untuk menganimasikan satu siri div dalam menggunakan pembolehubah CSS, pembangun telah menghadapi kesukaran. Walaupun menggunakan @keyframes untuk mentakrifkan animasi, hasilnya kekal sebagai kotak hitam statik.

Penyelesaian: Menggunakan @property

Untuk menyelesaikan isu ini, pembolehubah CSS hendaklah ditakrifkan menggunakan @property. Ini membolehkan untuk menentukan jenis pembolehubah, membolehkan penyemak imbas mengenalinya sebagai Nombor, contohnya. Dengan pemahaman ini, penyemak imbas kemudiannya boleh menghidupkan peralihan untuk pembolehubah itu dengan lancar.

Kod Contoh:

@property --opacity {
  syntax: '<number>';
  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, @property mentakrifkan --opacity sebagai a Nombor. Dalam animasi fadeIn, sifat kelegapan secara beransur-ansur meningkat kepada 1 pada tanda 50%. Selepas itu, warna latar belakang elemen html beralih dengan lancar kepada hitam separa lutsinar berdasarkan pembolehubah --opacity.

Atas ialah kandungan terperinci Mengapa Pembolehubah CSS Saya Tidak Beranimasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!