Bagaimana untuk Memohon Kelewatan Animasi CSS pada Semua Lelaran?

Kelewatan Animasi CSS: Aplikasi untuk Semua Lelaran

Apabila menggunakan animasi CSS dengan kelewatan, anda mungkin menghadapi masalah di mana kelewatan hanya digunakan pada lelaran pertama, menyebabkan animasi berulang secara berterusan tanpa selang masa yang diingini.

Untuk menyelesaikan isu ini, anda boleh menggunakan pendekatan yang berbeza:

@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%);}
}

Di sini, bingkai kunci 80% adalah sama dengan bingkai utama daripada, dengan berkesan mewujudkan "kelewatan" sebanyak 80% daripada panjang animasi penuh.

Seperti yang dicadangkan oleh pengguna yang berpengalaman, anda juga boleh menggunakan pendekatan berikut:

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

Kaedah ini melibatkan mencipta tempoh palsu untuk menampung "kelewatan" pada kedua-dua hujung animasi.

Atas ialah kandungan terperinci Bagaimana untuk Memohon Kelewatan Animasi CSS pada Semua Lelaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!