Bagaimana untuk Membuat Animasi CSS Berjalan Selamanya?

Cara Menghidupkan Gambar dalam CSS Selamanya

Dalam artikel ini, kami akan menangani soalan biasa yang berkisar tentang animasi CSS3: menjadikannya berjalan selama-lamanya.

Cabarannya

Andaikan anda mempunyai siri foto yang ingin anda paparkan sebagai tayangan slaid, beralih dengan lancar antara foto tersebut menggunakan animasi CSS3. Walau bagaimanapun, anda tidak berpuas hati dengan gelagat lalai, di mana foto terakhir pudar dan halaman dimuat semula, dengan berkesan memulakan semula tayangan slaid.

Penyelesaian

Untuk mencapai animasi gelung yang lancar, kita perlu untuk mengubah suai CSS untuk menentukan bahawa animasi harus berulang secara berterusan. Secara lalai, animasi CSS ditetapkan untuk dijalankan sekali sahaja.

Sifat utama yang akan kami tambahkan pada CSS kami ialah bilangan-iterasi-animasi. Berikut ialah contoh:

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

Dengan menetapkan kiraan lelaran-animasi kepada tak terhingga, animasi akan terus berputar selama-lamanya, mewujudkan peralihan yang lancar antara foto anda .

Atas ialah kandungan terperinci Bagaimana untuk Membuat Animasi CSS Berjalan Selamanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!