I am wanting to loop this entire code infinitely

Jaime Irvine — Thu, 20 Jun 2024 18:03:00 +0000

Hi guys I have this code which i will add below, i am trying to loop the entirety of it infinitely after the last image (imagetest5) finishes its animation and have is start back at (imagetest1)
Please could you assist!!

Code:

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

@keyframes flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

.imagetest {
opacity: 0;
animation: start-animation 20s infinite, flicker 2s infinite;
}

.imagetest1 {
opacity: 0;
animation:
fade-in 0.5s ease-in 1s infinite,
flicker1 1s cubic-bezier(0.4, 0, 1, 1) 1s infinite alternate,
disappear1 0.5s cubic-bezier(0.4, 0, 1, 1) 2s forwards;
}

.imagetest2 {
opacity: 0;
animation:
fade-in 0.5s ease-in 6s infinite,
flicker2 1s cubic-bezier(0.4, 0, 1, 1) 3s infinite alternate,
disappear2 0.5s cubic-bezier(0.4, 0, 1, 1) 4s forwards;
}

.imagetest3 {
opacity: 0;
animation:
fade-in 0.5s ease-in 10.5s infinite,
flicker3 1s cubic-bezier(0.4, 0, 1, 1) 5s infinite alternate,
disappear3 0.5s cubic-bezier(0.4, 0, 1, 1) 6s forwards;
}

.imagetest4 {
opacity: 0;
animation:
fade-in 0.5s ease-in 15s infinite,
flicker4 1s cubic-bezier(0.4, 0, 1, 1) 7s infinite alternate,
disappear4 0.5s cubic-bezier(0.4, 0, 1, 1) 8s forwards;
}

.imagetest5 {
opacity: 0;
animation:
fade-in 0.5s ease-in 17s infinite,
flicker4 1s cubic-bezier(0.4, 0, 1, 1) 7s infinite alternate,
disappear4 0.5s cubic-bezier(0.4, 0, 1, 1) 8s forwards;
}

@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes flicker1 {
0% { opacity: 1; }
5%, 25%, 50%, 75%, 95%, 100% { opacity: 0.8; }
10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% { opacity: 0.6; }
15%, 35%, 55%, 85% { opacity: 0.4; }
45%, 65%, 88% { opacity: 0.2; }
}

@keyframes flicker2 {
0% { opacity: 1; }
5%, 25%, 50%, 75%, 95%, 100% { opacity: 0.8; }
10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% { opacity: 0.6; }
15%, 35%, 55%, 85% { opacity: 0.4; }
45%, 65%, 88% { opacity: 0.2; }
}

@keyframes flicker3 {
0% { opacity: 1; }
5%, 25%, 50%, 75%, 95%, 100% { opacity: 0.8; }
10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% { opacity: 0.6; }
15%, 35%, 55%, 85% { opacity: 0.4; }
45%, 65%, 88% { opacity: 0.2; }
}

@keyframes flicker4 {
0% { opacity: 1; }
5%, 25%, 50%, 75%, 95%, 100% { opacity: 0.8; }
10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% { opacity: 0.6; }
15%, 35%, 55%, 85% { opacity: 0.4; }
45%, 65%, 88% { opacity: 0.2; }
}

@keyframes disappear1 {
0% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes disappear2 {
0% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes disappear3 {
0% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes disappear4 {
0% { opacity: 1; }
100% { opacity: 0; }
}

Forem: Jaime Irvine

I am wanting to loop this entire code infinitely