Mengapa CSS `animation-delay` Kadangkala Hanya Mempengaruhi Lelaran Animasi Pertama?

Memahami Kelewatan Animasi dalam CSS

Sifat kelewatan animasi ialah atribut CSS penting yang mengawal kelewatan sebelum animasi bermula. Walau bagaimanapun, dalam senario tertentu, ia hanya boleh digunakan pada lelaran awal animasi, meninggalkan lelaran berikutnya tidak terjejas.

Sebagai contoh, pertimbangkan kod berikut:

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

Dalam contoh ini, kelewatan animasi selama 4 saat hanya digunakan pada gelung pertama animasi. Selepas itu, animasi bersinar berterusan selama-lamanya, tanpa sebarang kelewatan.

Pendekatan Alternatif

Satu alternatif untuk menggunakan kelewatan animasi ialah memperkenalkan langkah perantara dalam bingkai utama animasi. Contohnya:

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

Teknik ini memanjangkan tempoh animasi secara berkesan untuk menampung kelewatan yang diingini (dalam kes ini, 80% daripada jumlah tempoh). Walau bagaimanapun, pendekatan ini boleh mengubah rupa animasi.

Keserasian Merentas Penyemak Imbas

Adalah penting untuk ambil perhatian bahawa tingkah laku kelewatan animasi boleh berbeza-beza merentas penyemak imbas yang berbeza . Sesetengah penyemak imbas mungkin menggunakan kelewatan secara konsisten merentas semua lelaran, manakala yang lain mungkin menetapkan semula kelewatan dengan setiap gelung berikutnya. Akibatnya, selalunya perlu menggunakan penyelesaian khusus penyemak imbas.

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