Bagaimanakah Saya Boleh Menambah Kelewatan Konsisten Antara Lelaran Animasi CSS?

Lewat Animasi CSS: Memanjangkan Jeda Antara Lelaran

Untuk mencapai animasi berulang dengan kelewatan yang konsisten antara lelaran, bukannya satu yang hanya digunakan pada lelaran pertama, pertimbangkan kaedah berikut:

1. Laraskan Tempoh Animasi:

Satu penyelesaian adalah dengan memasukkan kelewatan yang diingini ke dalam tempoh animasi. Ini melibatkan pengiraan tempoh sebenar yang perlu diambil oleh animasi (termasuk kelewatan) dan kemudian menetapkan sifat tempoh animasi dengan sewajarnya. Contohnya:

@keyframes barshine {
  <!-- ...Animation definition here... -->
}
.progbar {
  animation: barshine 5s linear infinite;
  animation-delay: 1s;
}

Dalam contoh ini, animasi akan mempunyai tempoh sebenar 5 saat, dengan kelewatan 1 saat.

2. Gunakan Animasi Berasingan untuk Kelewatan dan Kesan:

Pendekatan lain ialah mencipta animasi berasingan untuk kelewatan dan kesan sebenar. Kaedah ini memberikan lebih fleksibiliti untuk mengawal kelewatan secara bebas daripada animasi itu sendiri. Begini cara anda boleh mencapai ini:

@keyframes shine {
  <!-- ...Animation definition for the effect here... -->
}
@keyframes delay {
  from {opacity: 0;}
  to {opacity: 1;}
}
.progbar {
  animation: delay 4s, shine 1s infinite;
}

Dalam kes ini, animasi 'kelewatan' akan meningkatkan kelegapan secara beransur-ansur daripada 0 kepada 1 dalam tempoh 4 saat, mewujudkan kesan fade-in. Animasi 'bersinar' kemudiannya akan berjalan selama-lamanya, mewujudkan kecerunan sapuan yang dimaksudkan.

3. Gunakan Awalan Vendor:

Dalam sesetengah kes, anda mungkin menghadapi masalah keserasian penyemak imbas dengan sifat 'animation-delay'. Untuk memastikan keserasian, adalah disyorkan untuk memasukkan awalan vendor seperti '-webkit-' atau '-moz-' bersama-sama dengan sifat standard. Contohnya:

@-webkit-keyframes barshine {
  <!-- ...Animation definition... -->
}
@-moz-keyframes barshine {
  <!-- ...Animation definition... -->
}

Nota Tambahan:

Kod yang disediakan daripada jawapan menggunakan '@-webkit-keyframes' sesuai untuk versi WebKit yang lebih lama. Biasanya tidak disyorkan untuk bergantung pada awalan vendor dalam pembangunan moden melainkan perlu untuk keserasian.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Kelewatan Konsisten Antara Lelaran Animasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!