Bagaimanakah Saya Boleh Menghidupkan Sifat CSS Tersuai dengan Lancar?

Menghidupkan Sifat Tersuai dalam CSS

Mensasarkan untuk menghidupkan berbilang div dalam secara serentak, pembangun cuba menggunakan pembolehubah CSS tetapi menghadapi masalah. Walaupun pembolehubah CSS boleh digunakan dalam animasi, masalahnya terletak pada gelagat peralihan mendadak yang tidak dijangka dan bukannya interpolasi lancar.

Penyelesaian melibatkan penggunaan peraturan @property, yang mentakrifkan jenis pembolehubah yang dianimasikan. Dalam kes ini, kelegapan dinyatakan sebagai nombor, membolehkan penyemak imbas melihatnya sedemikian dan memudahkan animasi beransur-ansur.

Contoh Kod:

@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, pembolehubah kelegapan ditakrifkan secara eksplisit sebagai nombor, dan sifat animasi fadeIn menggunakan pembolehubah CSS untuk mencapai kesan peralihan beransur-ansur yang dikehendaki pada Kelegapan latar belakang elemen HTML.

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