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

Question

我想创建进度条之类的动画，为此我编写了以下代码

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

Answer 2

如果你只是想要视觉效果，这里有一个元素和一个动画的想法

.box {
  width: 100px;
  height: 10px;
  background: 
    linear-gradient(#fff,#fff) 32% 0,
    linear-gradient(#fff,#fff) 68% 0,
    linear-gradient(red, red),
    black;
  background-repeat:no-repeat;
  background-size:5px 100%,5px 100%,0% 100%;
  animation: progressbar 1s ease infinite;
}

@keyframes progressbar {
  100% {
    background-size:5px 100%,5px 100%,100% 100%;
  }
}

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

如果你想要透明度，我们可以添加蒙版：

.box {
  width: 100px;
  height: 10px;
  background: 
    linear-gradient(red, red) no-repeat,
    black;
  background-size:0% 100%;
  -webkit-mask:
    linear-gradient(#fff,#fff) left,
    linear-gradient(#fff,#fff) center,
    linear-gradient(#fff,#fff) right;
  -webkit-mask-size:30% 100%;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) left,
    linear-gradient(#fff,#fff) center,
    linear-gradient(#fff,#fff) right;
  mask-size:30% 100%;
  mask-repeat:no-repeat;
  animation: progressbar 1s ease infinite;
}

@keyframes progressbar {
  100% {
    background-size:100% 100%;
  }
}
body {
 background:pink;
}

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

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

Animate background fill from left to right using keyframes animation one by one

html

css

keyframe

css-transitions

css-animations