Adakah CSS `animation-delay` Mempengaruhi Semua Lelaran Animasi Berulang?

Isu Kelewatan Animasi CSS dalam Animasi Berulang

Konteks:

Mencipta animasi CSS boleh menjadi alat yang berkuasa untuk menambah visual kesan kepada halaman web. Walau bagaimanapun, menetapkan sifat kelewatan animasi untuk menangguhkan permulaan animasi boleh membawa kepada tingkah laku yang tidak dijangka apabila animasi ditetapkan untuk berulang tanpa had.

Soalan:

Adakah adalah mungkin untuk memastikan bahawa sifat kelewatan animasi digunakan pada semua lelaran animasi CSS berulang, bukannya hanya yang pertama lelaran?

Jawapan:

Tidak, sifat kelewatan animasi tidak boleh digunakan pada semua lelaran animasi CSS berulang. Apabila kelewatan awal telah digunakan pada lelaran pertama, lelaran berikutnya akan bermula serta-merta, walaupun kelewatan animasi ditentukan.

Penyelesaian:

Penyelesaian biasa adalah untuk mencipta bingkai utama baharu pada peratusan sewenang-wenangnya (seperti 80%) yang sama dengan bingkai utama awal. Ini secara berkesan mewujudkan kelewatan dengan melapik animasi dengan tempoh masa yang tidak kelihatan. Walau bagaimanapun, pendekatan ini boleh menghasilkan animasi yang lebih panjang jika kelewatan dikehendaki.

Pendekatan lain ialah menggunakan berbilang bingkai utama dengan tempoh yang berbeza untuk mencipta kelewatan yang diingini. Contohnya, untuk mencapai kelewatan 4 saat diikuti dengan animasi 1 saat, seseorang boleh menggunakan bingkai utama berikut:

@keyframes my-animation {
  0% { ... }
  80% { ... }
  90% { ... }
  100% { ... }
}

Menetapkan tempoh animasi kepada 5 saat akan mengakibatkan kelewatan 4 saat sebelum animasi bermula.

Batasan:

Perlu diperhatikan bahawa sifat kelewatan animasi digunakan pada keseluruhan animasi, termasuk semua lelaran. Oleh itu, jika anda memerlukan kelewatan yang berbeza-beza untuk elemen berbeza menggunakan animasi yang sama, anda perlu menggunakan pendekatan alternatif, seperti mencipta animasi berasingan dengan kelewatan yang berbeza.

Atas ialah kandungan terperinci Adakah CSS `animation-delay` Mempengaruhi Semua Lelaran Animasi Berulang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!