html - 如何使用css动画制作两步动画进度条？

Question

我想做两步进度条动画：红色条跑到中间，颜色变成黄色，然后中间会出现另一个黄色条，跑到最后。

我试图在类progressbar2中添加“显示：无”，但它会在开始时消失。如何使黄色条（类：progressbar2）在 2 秒后出现并且它没有出现在开头？

这是codepen代码

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

标签： htmlcss

Answer 1

我在最后一行的 progress2类中添加了opacity:0 。

在动画变成绿色时，我在设置 100% 的动画时添加了opacity:1 。

这非常有效。