html - 如何在同一页面上运行多个关键帧

我目前正在开发游戏，需要一些html和CSS帮助。
我有一个名为“犯罪”的页面，您可以处理6种可能的犯罪，在每种犯罪上，我都希望有一个倒数的进度条。我已经使其在第一个上起作用，但是正如我在代码上看到的那样，关键帧并没有进入特定的div，而是所有具有“填充”动画的事物。
由于这些犯罪的冷却时间不同，因此我需要让它们显示出其他进程之后的其他进程。

<div class="bar">
  <div class="in"></div>
</div>

.bar {
  border: 1px solid #666;
  height: 20px;
  width: 100%;
}

.in {
    animation: fill 20s linear 1;
    height: 100%;
    background-color: pink;
}

@keyframes fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

最佳答案

我认为您需要发布更多代码以使我们准确地了解您的工作。
根据您到目前为止的解释，我认为您只需要创建更多关键帧并将其分配给您想要的犯罪即可。
因此，如果每个犯罪部门都有

<div class="bar">
  <div class="in"></div>
</div>

那么您可以为每种犯罪更改内部div的名称。例如：

<div class="bar">
  <div class="in-1"></div>      //bar for crime 1
</div>

<div class="bar">
  <div class="in-2"></div>      //bar for crime 2
</div>

.in-1 {
  animation: fill1 20s linear 1;
  height: 100%;
  background-color: pink;
}

.in-2 {
  animation: fill2 20s linear 1;
  height: 100%;
  background-color: pink;
}

@keyframes fill1 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes fill2 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

以此类推。
希望有帮助:)

关于html - 如何在同一页面上运行多个关键帧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56731553/