html - 使用关键帧动画从左到右动画背景填充一一

Question

我想创建像进度条这样的动画，我已经编写了以下代码

My code

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 1s ease infinite;
  -moz-animation: progressbar 1s ease infinite;
  -o-animation: progressbar 1s ease infinite;
  animation: progressbar 1s ease infinite;
}

@-webkit-keyframes progressbar {
  0% {
    opacity: 1;
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: -100% 0;
  }
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

我的问题是所有动画同时工作，我想在一个动画完成后一个一个地添加动画，就像进度条一样。 animation-timing-function: Linear, steps(3, end); 会有帮助吗？请帮助我。谢谢

Answer 1

您可以设置animation-delay，但为此，您需要删除!important 另外，如果有 N 个框，您可以使用 JS 或 SCSS 循环添加样式。

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 1s ease infinite;
  -moz-animation: progressbar 1s ease infinite;
  -o-animation: progressbar 1s ease infinite;
  animation: progressbar 1s ease infinite;
}

.box:nth-child(2) {
  animation-delay: 1s;
}

.box:nth-child(3) {
  animation-delay: 2s;
}

@-webkit-keyframes progressbar {
  0% {
    opacity: 1;
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: -100% 0;
  }
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

如果您希望每个任务在重新启动之前停止，您可以这样做:

.box {
  width: 26px;
  height: 10px;
  display: inline-block;
  background-size: 200% 100%;
  background-image: linear-gradient(to left, red 50%, black 50%);
  -webkit-animation: progressbar 3s ease infinite;
  -moz-animation: progressbar 3s ease infinite;
  -o-animation: progressbar 3s ease infinite;
  animation: progressbar 3s ease infinite;
}

.box:nth-child(2) {
  animation-name: progressbar1;
}

.box:nth-child(3) {
  animation-name: progressbar2;
}

@-webkit-keyframes progressbar {
  0% {
    background-position: 0 0;
  }
  33%,
  100% {
    background-position: -100% 0;
  }
}

@-webkit-keyframes progressbar1 {
  0%,
  33% {
    background-position: 0 0;
  }
  66%,
  100% {
    background-position: -100% 0;
  }
}

@-webkit-keyframes progressbar2 {
  0%,
  66% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>