Hello, everyone. I don"t want to make a color run until the middle of the run, but the current situation is that the color color has already appeared before the color run is halfway through. I want to know how I should change my code until after the color run is finished. The progress2 just appeared and ran from the middle to the end?
this is codepen"s demo: https://codepen.io/lovelearni.
. I want the color to appear in the second second, not at the very beginning
---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>I have tried to add display:none, directly to progress2, but after doing so, the color is gone. What should I do? Thank you very much!