Html css动画状态栏未从0加载到其值

我正在尝试实现堆叠进度条的动画，其中第一个进度条将加载，然后第二个进度条将从第一个完成的进度条加载。这是我的css。每个状态栏都是一个div，所有div都在一个大div中返回。你知道我遗漏了什么吗？它不会从左到右逐个地将进度条从0加载到其值。 谢谢你的阅读

呈现的HTML：

<div><h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1><div class="space"><div> Example: User earning all the points</div><div class="terra-ProgressGroup"><!-- react-text: 94 --> <!-- /react-text --><div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 20%; height: 50px;"></div><div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 40%; height: 50px;"></div><div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept5 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept6 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><!-- react-text: 101 --> <!-- /react-text --></div></div><div><div> Example: User earning 600 of 1000 points(50/150/300/100)</div><div class="terra-ProgressGroup"><!-- react-text: 105 --> <!-- /react-text --><div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 5%; height: 50px;"></div><div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 15%; height: 50px;"></div><div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 30%; height: 50px;"></div><div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><!-- react-text: 110 --> <!-- /react-text --></div></div></div>

Grouped ProgressBar组件示例示例：用户获得所有积分示例：用户获得600分，共1000分（50/150/300/100）

不确定您的目标是什么效果，但按照您现在设置的方式，所有条的最终宽度都在开始处。使用transform:translateX（-100%）；仅移动与其自身宽度相同的右侧

这就是为什么你看到第三个元素从加载条的一半开始

---

如果您希望条带以0宽度开始并向外扩展，我会考虑缩放。

您只需要为元素提供背景色，并偏移每个条带的

动画延迟。您还需要使用负的
z索引
，以使前面的项目位于后面的项目之上

对于白色条，您可以在所有条上使用
右边框
，但
：last child


.terra ProgressGroup{
显示器：flex；
背景：#D3D5；
弯曲方向：行；
边界半径：0.5em；
溢出：自动；
位置：相对位置；
z指数：1；
}
@关键帧加载条{
0% {
不透明度：1；
}
100% {
变换：translateX（0）translate3d（0,0,0）；
不透明度：1；
}
}
.terra ProgressGroup——进展{
转换：translateX（-100%）translate3d（0,0,0）；
动画：加载条3s线性向前；
-webkit动画：加载条3s线性向前；
不透明度：0；
背景：蓝色；
}
.terra ProgressGroup--进度：非（：最后一个孩子）{
右边框：1px纯白；
}
.背景——概念2{
背景：蓝色；
}
.背景——概念2{
背景：粉红色；
动画延迟：3s；
z指数：-1；
}
.好的背景——概念3{
背景：紫色；
动画延迟：6秒；
z指数：-2；
}
.好的背景——概念4{
背景：红色；
动画延迟：9秒；
z指数：-3；
}
.好的背景——概念5{
背景：绿色；
动画延迟：12秒；
z指数：-4；
}
.好的背景——概念6{
背景：黄色；
动画延迟：15秒；
z指数：-5；
}

分组ProgressBar组件示例
示例：获得所有积分的用户
示例：用户获得1000分的600分（50/150/300/100）
请提供您的
HTML
，如果可能的话，请提供一个指向您正在运行的代码的链接。@AndyHoffman我正在为此使用一个react组件。请检查更新的问题。创建一个div数组并将其传递给大div为什么不选择一个解决之前问题的方法？看起来你正在使用我给你的解决方案中的代码。此外，您应该只发布呈现的HTML，这样更可能得到解决方案。只需启动你的应用程序并从开发工具中复制html，这样我们就有了一个可用的演示。@MichaelCoker当然可以。让我试试that@MichaelCoker请检查我在问题中添加的html。如果有帮助，请告诉我。感谢“第一个将加载，然后第二个从第一个加载完成”，但现在我们有它一样的加速减速。希望从左到右平滑加载它们。@User7354632781啊，明白了，默认动画时间是
ease
，我想，只需将其更改为
linear
，或者您可以将其更改为任何更新的我的答案再次感谢Michael Coker。学习很多好东西。我将玩这些动画计时问题，你知道我如何在css中创建一个类而不是创建6个类吗？我想从变量中的react中得到那个数字，并将它传递给单个函数
：root{--概念代码：概念编号；--概念代码2:-概念编号；}。动画{动画延迟：var（--概念代码）s；z-index:var（--概念代码2）；}
@User7354632781啊，捕捉得好，safari中的愚蠢错误。更新了我的答案。
<div><h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1><div class="space"><div> Example: User earning all the points</div><div class="terra-ProgressGroup"><!-- react-text: 94 --> <!-- /react-text --><div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 20%; height: 50px;"></div><div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 40%; height: 50px;"></div><div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept5 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept6 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><!-- react-text: 101 --> <!-- /react-text --></div></div><div><div> Example: User earning 600 of 1000 points(50/150/300/100)</div><div class="terra-ProgressGroup"><!-- react-text: 105 --> <!-- /react-text --><div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 5%; height: 50px;"></div><div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 15%; height: 50px;"></div><div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 30%; height: 50px;"></div><div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><!-- react-text: 110 --> <!-- /react-text --></div></div></div>