Fading

Question

Okay, is there any possible way for the code to not fade out like the that after it reaches all three bars I just want it to reset not fade out

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

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

?? I just tried that and it didnt work well

Answer 12

I jusr want to get rid of the fading at the end Solo

Answer 13

Im confused what do you mean by remove qnimation? Thats the whole point of the code, if tou can showme what you mean by writing the code that would be a lot better

Answer 14

No no, go to my code and you see the animation, at the END OF THE ANIMATION when the bars start to fade away I DONT want those bars to fade away I just want the code to restart

Answer 15

I just want the code to loop, basically when all the 3 bars reach 100% or are all there the code loops again and again like my other codes, i want an infinite code without the fading at the end thats my question

Answer 16

Okay, this might help to know what i mean, if tou kbow the fa fa battery animation on w3scgools thats how i wanr it to be basically

Answer 17

That overlats the whole battery, look on w3schools animation battery and thats how i want it, no fasing when the code finishes it resets

Answer 18

Calviղ thanks but i want all the bara to “restart” all at once

Answer 19

Welcome

Answer 20

WILCOM TOW DAY