Kunci untuk mewujudkan kesan animasi interlaced adalah menggunakan kelewatan animasi dengan: nth-child () atau atribut adat CSS untuk mencapai main balik kelewatan unsur-unsur. 1. Penggunaan: Nth-Child () untuk menetapkan nilai-nilai animasi tambahan untuk setiap item senarai untuk mencapai entri satu demi satu; 2. Gunakan atribut adat CSS seperti -I dan -Delay untuk mengawal latency secara dinamik dalam HTML untuk meningkatkan penyelenggaraan; 3. Kesan interlacing terbalik boleh dikira secara dinamik melalui Calc (); 4. Adalah disyorkan bahawa kawalan kelewatan berada di antara 0.1s dan 0.2s, gunakan ke hadapan untuk mengekalkan keadaan akhir, dan gunakan transformasi atau kelegapan untuk meningkatkan kesan visual. Kaedah ini sesuai untuk reka bentuk responsif dan mudah berkembang.

Mewujudkan kesan animasi yang terhuyung -huyung dengan CSS bermakna menghidupkan pelbagai elemen dalam urutan, dengan sedikit kelewatan antara setiap satu seperti gelombang atau kesan riak. Ini biasanya digunakan untuk senarai animasi, bahagian wira, atau urutan memuatkan. Inilah caranya untuk melakukannya dengan bersih dan berkesan.

? Gunakan animation-delay dengan :nth-child() atau CSS Custom Properties

Kunci kepada kesan yang berperingkat adalah menggunakan animasi yang sama kepada pelbagai elemen tetapi mengimbangi masa mula menggunakan animation-delay . Anda boleh melakukan ini secara manual dengan :nth-child() , atau secara dinamik menggunakan sifat tersuai CSS (pembolehubah).

Kaedah 1: Kelewatan Manual dengan :nth-child()

Anggapkan anda mempunyai senarai item:

 <ul class = "stagger-list">
  <li> Perkara 1 </li>
  <li> Item 2 </li>
  <li> Perkara 3 </li>
  <li> Item 4 </li>
  <li> Perkara 5 </li>
</ul>

Memohon animasi pudar dengan peningkatan kelewatan:

 @keyframes fadein {
  dari {
    Kelegapan: 0;
    Transform: Translate (10px);
  }
  ke {
    Kelegapan: 1;
    Transform: Translate (0);
  }
}

.stagger-list li {
  Kelegapan: 0;
  Animasi: Fadein 0.5s mudah ke hadapan;
}

.Stagger-list li: nth-child (1) {animation-delay: 0.1s; }
.Stagger-list li: nth-child (2) {animation-delay: 0.2s; }
.Stagger-list li: nth-child (3) {animation-delay: 0.3s; }
.Stagger-list li: nth-child (4) {animation-delay: 0.4s; }
.Stagger-list li: nth-child (5) {animation-delay: 0.5s; }

Ini memberikan setiap item kelewatan yang semakin lama, mewujudkan pintu masuk yang bersih.

? Anda boleh menggunakan transform untuk lebih banyak kesan dinamik seperti skala atau gelongsor.

? Kaedah 2: Dinamik terhuyung -huyung dengan sifat tersuai CSS

Untuk lebih fleksibel (terutamanya dengan banyak item), gunakan pembolehubah CSS untuk mengira kelewatan:

 .stagger-list li {
  --elay: calc (var (-i, 1) * 0.1s);
  Kelegapan: 0;
  Animasi: Fadein 0.5s mudah ke hadapan var (-kelewatan);
}

Kemudian, tetapkan --i pada setiap <li> dalam html:

 <li style = "-i: 1"> Item 1 </li>
<li style = "-i: 2"> Item 2 </li>
<li style = "-i: 3"> Item 3 </li>
<li style = "-i: 4"> item 4 </li>
<li style = "-i: 5"> Item 5 </li>

Sekarang anda boleh dengan mudah mengubah pengganda masa atau menggunakan semula corak di tempat lain.

Tips Pro

<li> Pastikan kelewatan halus : 0.1s hingga 0.2s antara item biasanya kelihatan lancar.<li> Gunakan forwards dalam animation-fill-mode supaya elemen tetap kelihatan selepas animasi.<li> Menggabungkan dengan opacity , transform , atau clip-path untuk kesan kreatif.<li> Untuk susun atur yang responsif, pertimbangkan untuk mengurangkan kelewatan pada mudah alih untuk mengelakkan menunggu lama.

? Bonus: Reverse Stagger (terakhir hingga pertama)

Balikkan pesanan dengan mengira dari akhir:

 .stagger-list li {
  --Total: 5; / * jumlah item */
  --dread-delay: calc ((var (-total)-var (-i)) * 0.1s);
  Animasi: Fadein 0.5s mudah ke hadapan var (-Reverse-Delay);
}

Kini item terakhir menghidupkan dahulu.

Pada asasnya, animasi yang terhuyung -huyung hanya mengenai masa yang dikawal . Sama ada anda menggunakan :nth-child() atau pembolehubah CSS, idea itu sama: mengimbangi setiap animasi sedikit . Kaedah kedua skala lebih baik dan lebih mudah untuk dikendalikan dalam kandungan dinamik.

Tidak rumit -hanya memberi perhatian kepada masa dan pelonggaran untuk memastikannya lancar.

Atas ialah kandungan terperinci Bagaimana untuk membuat kesan animasi yang berperingkat dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!