Bagaimanakah Saya Boleh Membuat Gelung Animasi CSS3 Selama-lamanya?

Menggelung Animasi CSS3 Selama-lamanya

Animasi CSS3 menyediakan cara yang mudah untuk menganimasikan elemen pada halaman web. Walau bagaimanapun, secara lalai, animasi ini dimainkan sekali sahaja. Untuk mempunyai gelung animasi secara berterusan, kita perlu menggunakan sifat CSS tertentu.

Cabaran

Anda ingin mempunyai satu siri imej pudar masuk dan keluar secara berterusan tanpa perlu muat semula halaman.

Penyelesaian

Kunci untuk membolehkan gelung tanpa henti bagi animasi CSS3 terletak pada sifat kiraan lelaran animasi. Sifat ini menentukan bilangan kali animasi berulang sebelum ia berhenti. Dengan menetapkan sifat ini kepada infiniti, kami boleh memberitahu penyemak imbas untuk menjalankan animasi selama-lamanya.

Dalam kod yang anda berikan, anda telah menentukan berbilang bekas imej dengan kelas CSS. Untuk mendayakan gelung berterusan, tambahkan baris berikut pada peraturan CSS untuk setiap imej:

animation-iteration-count: infinite;

Berikut ialah CSS yang dikemas kini dengan sifat tambahan:

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1 infinite;
  ...
}

.photo2 {
  opacity: 0;
  animation: fadeinphoto 7s 5s infinite;
  ...
}

...

Dengan menetapkan lelaran-animasi- dikira hingga tak terhingga untuk setiap imej, anda telah memastikan bahawa animasi fade-in akan berulang tanpa henti, dengan lancar beralih antara imej tanpa sebarang gangguan. Ini akan mencipta ilusi animasi gelung berterusan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Gelung Animasi CSS3 Selama-lamanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!