Maison > interface Web > tutoriel CSS > Je veux boucler tout ce code à l'infini

Je veux boucler tout ce code à l'infini

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2024-07-18 07:44:20
original
324 Les gens l'ont consulté

I am wanting to loop this entire code infinitely

Salut les gars, j'ai ce code que je vais ajouter ci-dessous, j'essaie de le boucler en entier à l'infini après que la dernière image (imagetest5) ait terminé son animation et recommence à (test d'image1)
S'il vous plaît, pourriez-vous m'aider !!

Code :

@keyframes start-animation {
0% { opacité : 0 ; >
10% { opacité : 1 ; >
20% { opacité : 0 ; >
100 % { opacité : 0 ; >
>

@keyframes scintillent {
0 %, 100 % { opacité : 1 ; >
50 % { opacité : 0,3 ; >
>

.imagetest {
opacité : 0 ;
animation : démarrage de l'animation 20 s infini, scintillement 2 s infini ;
>

.imagetest1 {
opacité : 0 ;
animation :
fondu d'entrée 0,5 s, entrée facile 1 s infini,
flicker1 1s cubique-bézier(0,4, 0, 1, 1) 1s alterné infini,
disparaître1 0,5s cube-bézier(0,4, 0, 1, 1) 2s en avant ;
>

.imagetest2 {
opacité : 0 ;
animation :
fondu en entrée 0,5 s facile en 6 s infini,
flicker2 1s cubique-bézier(0,4, 0, 1, 1) 3s alterné infini,
disparaître2 0,5 s cube-bézier (0,4, 0, 1, 1) 4 s en avant ;
>

.imagetest3 {
opacité : 0 ;
animation :
fondu entrant en 0,5 s, facile en 10,5 s infini,
flicker3 1s cubique-bézier (0,4, 0, 1, 1) 5s alterné infini,
disparaître3 0,5s cube-bézier(0,4, 0, 1, 1) 6s en avant ;
>

.imagetest4 {
opacité : 0 ;
animation :
fondu en entrée 0,5 s facile en 15 s infini,
flicker4 1s cubique-bézier (0,4, 0, 1, 1) 7s alterné infini,
disparaître4 0,5s cube-bézier(0,4, 0, 1, 1) 8s en avant ;
>

.imagetest5 {
opacité : 0 ;
animation :
fondu en entrée 0,5 s facile en 17 s infini,
flicker4 1s cubique-bézier (0,4, 0, 1, 1) 7s alterné infini,
disparaître4 0,5s cube-bézier(0,4, 0, 1, 1) 8s en avant ;
>

@keyframes fondu entrant {
0% { opacité : 0 ; >
100 % { opacité : 1 ; >
>

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

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

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

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

@keyframes disparaissent1 {
0% { opacité : 1 ; >
100 % { opacité : 0 ; >
>

@keyframes disparaissent2 {
0% { opacité : 1 ; >
100 % { opacité : 0 ; >
>

@keyframes disparaît3 {
0% { opacité : 1 ; >
100 % { opacité : 0 ; >
>

@keyframes disparaissent4 {
0% { opacité : 1 ; >
100 % { opacité : 0 ; >
>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal