使用关键帧动画从左到右逐个对背景填充进行动画处理

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>

我的问题是所有动画同时工作，我想像进度条一样在无限循环中一个接一个地添加动画。动画计时功能：线性，步长(3，结束(;会有帮助吗？ 请帮我解决这个问题。谢谢

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>