Masalah:
Anda ingin mencipta urutan animasi tak terhingga di mana yang pertama imej memudar apabila imej terakhir memudar.
Kod Disediakan:
Kod HTML dan CSS yang disediakan mewujudkan satu siri lima imej yang pudar secara berurutan, tetapi selepas mencapai imej terakhir, halaman dimuat semula.
Penyelesaian Menggunakan animation-iteration-count:
Untuk mencapai gelung tak terhingga tanpa memuat semula halaman, tambahkan sifat berikut pada peraturan animasi:
animation-iteration-count: infinite;
Harta ini menentukan bilangan kali animasi harus berulang. Dengan menetapkannya kepada infinite, anda memastikan bahawa animasi berjalan selama-lamanya.
CSS yang dikemas kini:
/* Animation Keyframes*/ @keyframes fadeinphoto { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeinphoto { 0% { opacity: 0; } 50% { opacity: 1; } A100% { 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 infinite; -moz-animation: fadeinphoto 7s 1 infinite; -webkit-animation: fadeinphoto 7s 1 infinite; -o-animation: fadeinphoto 7s 1 infinite; } .photo2 { opacity: 0; animation: fadeinphoto 7s 5s infinite; -moz-animation: fadeinphoto 7s 5s infinite; -webkit-animation: fadeinphoto 7s 5s infinite; -o-animation: fadeinphoto 7s 5s infinite; } .photo3 { opacity: 0; animation: fadeinphoto 7s 10s infinite; -moz-animation: fadeinphoto 7s 10s infinite; -webkit-animation: fadeinphoto 7s 10s infinite; -o-animation: fadeinphoto 7s 10s infinite; } .photo4 { opacity: 0; animation: fadeinphoto 7s 15s infinite; -moz-animation: fadeinphoto 7s 15s infinite; -webkit-animation: fadeinphoto 7s 15s infinite; -o-animation: fadeinphoto 7s 15s infinite; } .photo5 { opacity: 0; animation: fadeinphoto 7s 20s infinite; -moz-animation: fadeinphoto 7s 20s infinite; -webkit-animation: fadeinphoto 7s 20s infinite; -o-animation: fadeinphoto 7s 20s infinite; }
Dengan pengubahsuaian ini, urutan animasi kini akan gelung tanpa had, memastikan peralihan yang lancar daripada imej terakhir kepada yang pertama.
Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta animasi gelung berterusan dalam CSS3 di mana imej pertama pudar dengan lancar apabila imej terakhir pudar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!