使用关键帧动画从左到右动画背景填充答案

【问题标题】：Animate background fill from left to right using keyframes animation one by one使用关键帧动画从左到右动画背景填充
【发布时间】：2020-02-03 18:35:10
【问题描述】：

我想为我编写的以下代码创建类似进度条的动画

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); 会有帮助吗？请帮助我。谢谢

【问题讨论】：

您可以将animation-delay 属性用于2nd 和3rd div 动画，例如.box:nth-child(2){animation-delay: 2s} 和.box:nth-child(3){animation-delay: 3s}，并使用:before 或:after css 属性填充背景。

标签： html css css-animations css-transitions keyframe

【解决方案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>

【讨论】：

谢谢，但这不是我想要的结果。我想要一个接一个的无限动画。

【解决方案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%;
  }
}

&lt;div class="box"&gt;&lt;/div&gt;

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

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

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：