Bagaimanakah Saya Boleh Menghidupkan Berbilang Contoh Harta Tersuai CSS Menggunakan Animasi Tunggal?

Menghidupkan Sifat Tersuai dalam CSS

Dalam CSS, sifat tersuai, juga dikenali sebagai pembolehubah CSS, menawarkan mekanisme yang teguh untuk mentakrif dan menggunakan semula penggayaan nilai sepanjang projek. Mereka menyediakan keupayaan untuk menukar sifat gaya secara dinamik berdasarkan nilai atau pembolehubah yang dipratentukan. Walau bagaimanapun, apabila ia berkaitan dengan animasi, sifat tersuai kadangkala boleh menimbulkan cabaran.

Satu cabaran sedemikian timbul apabila cuba menganimasikan berbilang tika sifat tertentu menggunakan satu animasi. Dengan memanfaatkan sifat tersuai, pembangun menyasarkan agar semua kejadian berikutnya dipengaruhi oleh animasi yang sama. Walau bagaimanapun, dalam kes tertentu, hanya satu kejadian yang menjalani animasi yang diingini, manakala kejadian selebihnya kekal tidak terjejas.

Memahami Sifat Tersuai dalam Animasi

Isu ini berpunca daripada asas tingkah laku sifat tersuai dalam animasi. Apabila ditakrifkan menggunakan sintaks CSS tradisional, sifat tersuai dianggap sebagai nilai statik semasa animasi. Ini bermakna bahawa nilai sifat tidak diinterpolasi sepanjang tempoh animasi, mengakibatkan perubahan mendadak dan bukannya peralihan beransur-ansur.

Penyelesaian: Menggunakan Peraturan @property

Untuk mengatasi had ini, pembangun boleh menggunakan peraturan @property bersama-sama dengan sifat tersuai. Peraturan @property membenarkan untuk menentukan pembolehubah dengan menentukan jenisnya dan memberikan nilai awal. Dengan mengisytiharkan sifat tersuai sebagai nombor, contohnya, penyemak imbas boleh mentafsirkan sifat tersebut sebagai nilai berangka dan mendayakan peralihan dan animasi yang lancar.

Contoh Pelaksanaan:

Pertimbangkan contoh berikut, di mana kami menyasarkan untuk mencipta elemen div berkelip menggunakan sifat tersuai untuk kelegapan:

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

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

#test {
  width: 100px;
  height: 200px;
  background-color: black;
  animation: fadeIn 1s infinite;
}

#test div {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--opacity);
}

Menggunakan pendekatan ini, sifat tersuai --opacity ditakrifkan sebagai nombor, membenarkan animasi untuk menginterpolasi nilai kelegapan dengan lancar sepanjang tempoh animasi, mencapai kesan berkelip yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Berbilang Contoh Harta Tersuai CSS Menggunakan Animasi Tunggal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!