想請問如何做到黃色條跑到一半後綠色條才出現的效果?

Question

大家好，我想製作一個黃色的條跑到一半之後，綠色的條才出現並把條跑完，但現在的情況是在黃色的條跑到一半之前綠色的條就已經出現了，想請問我應該如何更改我的代碼達到黃色條跑完之後，綠色條才出現並從中間跑到最後?這是codepen的demo:https://codepen.io/lovelearni...我想讓綠色條(progress2)在第2秒才開始出現，而不是最一開始就出現---css---.container1{position:relative;width:100%;margin-top:10px;}.progress1{height:10px;width:50%;background-color:yellow;border-radius:2px;animation:becomeyellow2slinear;display:flex;float:left;}.progress2{height:10px;width:50%;position:absolute;left:50%;/*display:flex;float:right;*/background-color:green;border-radius:2px;animation:becomegreen2s2slinear;}@keyframesbecomeyellow{0%{width:0%;background-color:red;}100%{width:50%;background-color:yellow;}}@keyframesbecomegreen{0%{width:0%;background-color:yellow;display:none;}100%{width:50%;background-color:green;}}---html---我試過直接在progress2直接加上display:none,但這樣做之後綠色的條整條都不見了，想請問應該要怎麼做呢?非常謝謝大家!

Answer 1

talkischeap,showyouthecode.
.container1{
position:relative;
width:100%;
margin-top:10px;
}
.progress1{
height:10px;
width:50%;
background-color:yellow;
border-radius:2px;
animation:becomeyellow2sforwards;
display:flex;
float:left;
}
.progress2{
height:10px;
width:50%;
position:absolute;
left:50%;
/*display:flex;
float:right;*/
background-color:green;
border-radius:2px;
animation:becomegreen4sforwards;
}
@keyframesbecomeyellow{
0%{
width:0%;
background-color:red;
}
100%{
width:50%;
background-color:yellow;
}
}
@keyframesbecomegreen{
0%{
width:0%;
}
50%{
width:0%;
background-color:yellow;
}
100%{
width:50%;
background-color:green;
}
}
吧progress2的延时去掉，改成4s，前50%宽度为0.
                            

Answer 2

我觉得如果只是想要达到进度条从红到黄到绿的渐变，可以向下面这样简单实现：
.container1{
margin-top:10px;
}
.progress{
height:10px;
width:0%;
border-radius:2px;
animation:gradient2slinearforwards;
}
@keyframesgradient{
0%{
background:red
}
50%{
background:yellow;
}
100%{
background:green;
width:100%;
}
}