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

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: becomeyellow 2s linear;
            display: flex;
            float: left;
        }
        
        .progress2{
            height: 10px;
            width: 50%;
            position: absolute;
            left: 50%;
            /*display: flex;
            float: right;*/
            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;
            }
        }

---html---
<div class="container1">
        <div class="progress1">
        </div>
        <div class="progress2">
    </div>
    </div>

我試過直接在progress2直接加上display:none,但這樣做之後綠色的條整條都不見了，想請問應該要怎麼做呢?非常謝謝大家!

Answer 1

talk is cheap, show you the code.

.container1{
    position: relative;
    width: 100%;
    margin-top: 10px;
}
.progress1{
    height: 10px;
    width: 50%;
    background-color: yellow;
    border-radius: 2px;
    animation: becomeyellow 2s forwards;
    display: flex;
    float: left;
}
        
.progress2{
    height: 10px;
    width: 50%;
    position: absolute;
    left: 50%;
    /*display: flex;
    float: right;*/
    background-color: green;
    border-radius: 2px;
    animation: becomegreen 4s forwards;
}
@keyframes becomeyellow{
    0%{
        width: 0%;
        background-color: red;
    }
    100%{
        width: 50%;
        background-color: yellow;
    }
}
@keyframes becomegreen{
    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: gradient 2s linear forwards;
}
@keyframes gradient{
  0% {
    background: red
   }
  50% {
    background: yellow;
  }
  100% {
    background: green;
    width: 100%;
  }
}