Answer 1

Remove the infinite from the animation and use @keyframes once in both this animation and the one you want.

This is all you need:
.prog1, .prog2, .prog3 {
position: relative;
height: 90px;
background-color: limegreen;
border-radius: 0px;
opacity: 0;
}
@keyframes prog {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}

Edited.☺️

Answer 2

Oh, I'm sorry, I forgot to remove "animation".

I hope you understand that all other values ​​that are different from each other should remain in each prog1, prog2, prog3 separately.

Answer 3

Maybe you can show the code with my corrections? After all, you need to figure out the code, or you want me to do everything for you, and you just copy it like this code

Answer 4

Unfortunately we do not understand each other. What does: "... I just want the code to restart" mean?

Answer 5

Use steps function rather than linear to get rid of the linear fading effect.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

You only need one step to make transition change at 50% of a common @keyframes

Check out the code i modified.

https://code.sololearn.com/WyIg4yXHt4d6/?ref=app

Answer 6

If the fading is undesirable then use Calviղ's revision and apply my suggested tweaks.

Answer 7

Brian, what if I want the stripes to be multi-colored? ☺️

Answer 8

Brian 👍😉

Answer 9

Your Mom these tweaks might give the appearance you want. Let .prog3 overlay the others. The others will vanish behind the scenes and .prog3 will be the last one to be seen as it fades out.

.prog3 {
...
left: 7.5px;
...
width: 241px;
...

Answer 10

Solo though I expect there is a better way, my technique could work with your requirement, too. Simply overlay two more divs with the same timing as the third.

Answer 11

Welcome

Answer 12

WILCOM TOW DAY

Answer 13

Hi