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

Question

我目前正在开发一款游戏，需要一些 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%;
  }
}

Answer 1

我认为您需要发布更多代码，以便我们准确理解您在做什么。根据您到目前为止的解释，我认为您只需要创建更多关键帧并将它们分配给您想要的犯罪。所以如果你对每个犯罪 div 都有这个

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

等等所有的罪行。希望有所帮助:)