Hai kawan-kawan saya ada kod ini yang akan saya tambahkan di bawah, saya cuba menggelungkan keseluruhannya tanpa terhingga selepas imej terakhir (imagetest5) menamatkan animasinya dan mulakan semula pada (ujian imej1)
Tolong boleh bantu!!
Kod:
@keyframes mula animasi {
0% { kelegapan: 0; }
10% { kelegapan: 1; }
20% { kelegapan: 0; }
100% { kelegapan: 0; }
}
@keyframes berkelip {
0%, 100% { kelegapan: 1; }
50% { kelegapan: 0.3; }
}
.imagetest {
kelegapan: 0;
animasi: permulaan animasi 20s tak terhingga, kelipan 2s tak terhingga;
}
.imagetest1 {
kelegapan: 0;
animasi:
fade-in 0.5s ease-in 1s infinite,
flicker1 1s cubic-bezier(0.4, 0, 1, 1) 1s infinite alternatif,
hilang1 0.5s kubik-bezier(0.4, 0, 1, 1) 2s ke hadapan;
}
.imagetest2 {
kelegapan: 0;
animasi:
fade-in 0.5s ease-in 6s infinite,
flicker2 1s cubic-bezier(0.4, 0, 1, 1) 3s infinite alternatif,
hilang2 0.5s kubik-bezier(0.4, 0, 1, 1) 4s ke hadapan;
}
.imagetest3 {
kelegapan: 0;
animasi:
fade-in 0.5s ease-in 10.5s infinite,
flicker3 1s cubic-bezier(0.4, 0, 1, 1) 5s infinite alternative,
menghilang3 0.5s kubik-bezier(0.4, 0, 1, 1) 6s ke hadapan;
}
.imagetest4 {
kelegapan: 0;
animasi:
fade-in 0.5s ease-in 15s infinite,
flicker4 1s cubic-bezier(0.4, 0, 1, 1) 7s infinite alternatif,
menghilang4 0.5s kubik-bezier(0.4, 0, 1, 1) 8s ke hadapan;
}
.imagetest5 {
kelegapan: 0;
animasi:
fade-in 0.5s ease-in 17s infinite,
flicker4 1s cubic-bezier(0.4, 0, 1, 1) 7s infinite alternatif,
menghilang4 0.5s kubik-bezier(0.4, 0, 1, 1) 8s ke hadapan;
}
@keyframes pudar masuk {
0% { kelegapan: 0; }
100% { kelegapan: 1; }
}
@keyframes flicker1 {
0% { kelegapan: 1; }
5%, 25%, 50%, 75%, 95%, 100% { kelegapan: 0.8; }
10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% { kelegapan: 0.6; }
15%, 35%, 55%, 85% { kelegapan: 0.4; }
45%, 65%, 88% { kelegapan: 0.2; }
}
@keyframes flicker2 {
0% { kelegapan: 1; }
5%, 25%, 50%, 75%, 95%, 100% { kelegapan: 0.8; }
10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% { kelegapan: 0.6; }
15%, 35%, 55%, 85% { kelegapan: 0.4; }
45%, 65%, 88% { kelegapan: 0.2; }
}
@keyframes flicker3 {
0% { kelegapan: 1; }
5%, 25%, 50%, 75%, 95%, 100% { kelegapan: 0.8; }
10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% { kelegapan: 0.6; }
15%, 35%, 55%, 85% { kelegapan: 0.4; }
45%, 65%, 88% { kelegapan: 0.2; }
}
@keyframes flicker4 {
0% { kelegapan: 1; }
5%, 25%, 50%, 75%, 95%, 100% { kelegapan: 0.8; }
10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% { kelegapan: 0.6; }
15%, 35%, 55%, 85% { kelegapan: 0.4; }
45%, 65%, 88% { kelegapan: 0.2; }
}
@bingkai kunci hilang1 {
0% { kelegapan: 1; }
100% { kelegapan: 0; }
}
@keyframes hilang2 {
0% { kelegapan: 1; }
100% { kelegapan: 0; }
}
@keyframes hilang3 {
0% { kelegapan: 1; }
100% { kelegapan: 0; }
}
@keyframes hilang4 {
0% { kelegapan: 1; }
100% { kelegapan: 0; }
}
Atas ialah kandungan terperinci Saya mahu menggelungkan keseluruhan kod ini tanpa had. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!