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

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---

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%;}}