Is it possible to create a two-step progress bar animation where the red bar transitions to yellow in the middle, followed by another yellow bar moving to the end?
I attempted using "display: none" in the progressbar2 class, but it disappears at the start. How can I make the yellow bar (class: progressbar2) appear after 2 seconds without showing initially?
.container1 {
position: relative;
width: 100%;
margin-top: 10px;
}
.progress1 {
height: 10px;
width: 50%;
background-color: yellow;
border-radius: 2px;
animation: becomeyellow 2s linear;
display: flex;
float: left;
}
.progress2 {
height: 10px;
width: 50%;
position: absolute;
left: 50%;
background-color: green;
border-radius: 2px;
animation: becomegreen 2s 2s linear;
}
@keyframes becomeyellow {
0% {
width: 0%;
background-color: red;
}
100% {
width: 50%;
background-color: yellow;
}
}
@keyframes becomegreen {
0% {
width: 0%;
background-color: yellow;
display: none;
}
100% {
width: 50%;
background-color: green;
}
}<div class="container1">
<div class="progress1"></div>
<div class="progress2"></div>
</div>