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

我想创建类似progressbar的动画，为此我编写了以下代码

.盒子{ 宽度：26px； 高度：10px； 显示：内联块； 背景大小：200%100%； 背景图像：左线性渐变，红色50%，黑色50%； -webkit动画：progressbar 1s轻松无限； -moz动画：progressbar 1s轻松无限； -o动画：progressbar 1s轻松无限； 动画：progressbar 1s轻松无限； } @-webkit关键帧进度条{ 0% { 不透明度：1； 背景位置：0； } 100% { 不透明度：1； 背景位置：-100%0； } } 您可以设置动画延迟，但为此，您需要删除！重要的 另外，如果有N个框，可以使用JS或SCSS循环添加样式

.盒子{ 宽度：26px； 高度：10px； 显示：内联块； 背景大小：200%100%； 背景图像：左线性渐变，红色50%，黑色50%； -webkit动画：progressbar 1s轻松无限； -moz动画：progressbar 1s轻松无限； -o动画：progressbar 1s轻松无限； 动画：progressbar 1s轻松无限； } .box:nth-child2{ 动画延迟：1s； } .box:nth-child3{ 动画延迟：2s； } @-webkit关键帧进度条{ 0% { 不透明度：1； 背景位置：0； } 100% { 不透明度：1； 背景位置：-100%0； } } 您可以设置动画延迟，但为此，您需要删除！重要的 另外，如果有N个框，可以使用JS或SCSS循环添加样式

.盒子{ 宽度：26px； 高度：10px； 显示：内联块； 背景大小：200%100%； 背景图像：左线性渐变，红色50%，黑色50%； -webkit动画：progressbar 1s轻松无限； -moz动画：progressbar 1s轻松无限； -o动画：progressbar 1s轻松无限； 动画：progressbar 1s轻松无限； } .box:nth-child2{ 动画延迟：1s； } .box:nth-child3{ 动画延迟：2s； } @-webkit关键帧进度条{ 0% { 不透明度：1； 背景位置：0； } 100% { 不透明度：1； 背景位置：-100%0； } }

---

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

.盒子{ 宽度：100px； 高度：10px； 背景： 线性梯度fff，fff 32%0， 线性梯度fff，fff 68%0， 线性渐变，红色， 黑色 背景重复：无重复； 背景尺寸：5px100%，5px100%，0%100%； 动画：progressbar 1s轻松无限； } @关键帧进度条{ 100% { 背景尺寸：5px100%，5px100%，100%100%； } }

---

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

.盒子{ 宽度：100px； 高度：10px； 背景： 线性梯度fff，fff 32%0， 线性梯度fff，fff 68%0， 线性渐变，红色， 黑色 背景重复：无重复； 背景尺寸：5px100%，5px100%，0%100%； 动画：progressbar 1s轻松无限； } @关键帧进度条{ 100% { 背景尺寸：5px100%，5px100%，100%100%； } }

---

谢谢，但这不是我想要的结果。我想要无限的动画，但一个接一个。谢谢，但这不是我想要的结果。我想要无限的动画，但要一个接一个。你可以对第二和第三版动画使用动画延迟属性，如.box:nth-child2{animation delay:2s}&.box:nth-child3{animation delay:3s}，并用：before或：after css属性填充背景。你可以对第二和第三版动画使用动画延迟属性，如.box:nth-child2{animation delay:2s}&.box:nth-child3{animation delay:3s}并使用：before或：after css属性填充背景。