Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Ich möchte diesen gesamten Code in einer Endlosschleife durchlaufen

WBOY
Freigeben: 2024-07-18 07:44:20
Original
244 Leute haben es durchsucht

I am wanting to loop this entire code infinitely

Hallo Leute, ich habe diesen Code, den ich unten hinzufügen werde. Ich versuche, den gesamten Code in einer Endlosschleife zu durchlaufen, nachdem das letzte Bild (imagetest5) seine Animation beendet hat und wieder von vorne beginnt (imagetest1)
Könnten Sie bitte helfen!!

Code:

@keyframes start-animation {
0 % { Deckkraft: 0; }
10 % { Deckkraft: 1; }
20 % { Deckkraft: 0; }
100 % { Deckkraft: 0; }
}

@Keyframes flackern {
0 %, 100 % { Deckkraft: 1; }
50 % { Deckkraft: 0,3; }
}

.imagetest {
Deckkraft: 0;
Animation: Startanimation 20s unendlich, Flicker 2s unendlich;
}

.imagetest1 {
Deckkraft: 0;
Animation:
Einblenden 0,5 s, Einblenden 1 s unendlich,
flimmern1 1s kubisch-bezier(0,4, 0, 1, 1) 1s unendlich abwechselnd,
verschwinden1 0,5 s kubisch-bezier(0,4, 0, 1, 1) 2 s vorwärts;
}

.imagetest2 {
Deckkraft: 0;
Animation:
Einblenden 0,5 Sekunden, Einblenden 6 Sekunden unendlich,
flicker2 1s kubisch-bezier(0,4, 0, 1, 1) 3s unendlich abwechselnd,
verschwinden2 0,5 s kubisch-bezier(0,4, 0, 1, 1) 4 s vorwärts;
}

.imagetest3 {
Deckkraft: 0;
Animation:
Einblenden 0,5 s, Einblenden 10,5 s unendlich,
Flicker3 1s kubisch-bezier(0,4, 0, 1, 1) 5s unendlich abwechselnd,
verschwinden3 0,5 s kubisch-bezier(0,4, 0, 1, 1) 6 s vorwärts;
}

.imagetest4 {
Deckkraft: 0;
Animation:
Einblenden 0,5 Sekunden, Einblenden 15 Sekunden unendlich,
flimmern4 1s kubisch-bezier(0,4, 0, 1, 1) 7s unendlich abwechselnd,
verschwinden4 0,5 s kubisch-bezier(0,4, 0, 1, 1) 8 s vorwärts;
}

.imagetest5 {
Deckkraft: 0;
Animation:
Einblenden 0,5 Sekunden, Einblenden 17 Sekunden unendlich,
flimmern4 1s kubisch-bezier(0,4, 0, 1, 1) 7s unendlich abwechselnd,
verschwinden4 0,5 s kubisch-bezier(0,4, 0, 1, 1) 8 s vorwärts;
}

@keyframes Einblendung {
0 % { Deckkraft: 0; }
100 % { Deckkraft: 1; }
}

@keyframes flicker1 {
0 % { Deckkraft: 1; }
5 %, 25 %, 50 %, 75 %, 95 %, 100 % { Deckkraft: 0,8; }
10 %, 20 %, 30 %, 40 %, 60 %, 70 %, 80 %, 90 % { Deckkraft: 0,6; }
15 %, 35 %, 55 %, 85 % { Deckkraft: 0,4; }
45 %, 65 %, 88 % { Deckkraft: 0,2; }
}

@keyframes flicker2 {
0 % { Deckkraft: 1; }
5 %, 25 %, 50 %, 75 %, 95 %, 100 % { Deckkraft: 0,8; }
10 %, 20 %, 30 %, 40 %, 60 %, 70 %, 80 %, 90 % { Deckkraft: 0,6; }
15 %, 35 %, 55 %, 85 % { Deckkraft: 0,4; }
45 %, 65 %, 88 % { Deckkraft: 0,2; }
}

@keyframes flicker3 {
0 % { Deckkraft: 1; }
5 %, 25 %, 50 %, 75 %, 95 %, 100 % { Deckkraft: 0,8; }
10 %, 20 %, 30 %, 40 %, 60 %, 70 %, 80 %, 90 % { Deckkraft: 0,6; }
15 %, 35 %, 55 %, 85 % { Deckkraft: 0,4; }
45 %, 65 %, 88 % { Deckkraft: 0,2; }
}

@keyframes flicker4 {
0 % { Deckkraft: 1; }
5 %, 25 %, 50 %, 75 %, 95 %, 100 % { Deckkraft: 0,8; }
10 %, 20 %, 30 %, 40 %, 60 %, 70 %, 80 %, 90 % { Deckkraft: 0,6; }
15 %, 35 %, 55 %, 85 % { Deckkraft: 0,4; }
45 %, 65 %, 88 % { Deckkraft: 0,2; }
}

@keyframes verschwinden1 {
0 % { Deckkraft: 1; }
100 % { Deckkraft: 0; }
}

@keyframes verschwinden2 {
0 % { Deckkraft: 1; }
100 % { Deckkraft: 0; }
}

@keyframes verschwinden3 {
0 % { Deckkraft: 1; }
100 % { Deckkraft: 0; }
}

@keyframes verschwinden4 {
0 % { Deckkraft: 1; }
100 % { Deckkraft: 0; }
}

Das obige ist der detaillierte Inhalt vonIch möchte diesen gesamten Code in einer Endlosschleife durchlaufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!