Html 从右到左停止动画

我希望这个进度条只从左到右设置动画，从文本开始。动画从右向左结束后，从某个点开始从右向左设置动画。注意，我需要使用flexbox和文本宽度

.table bar.bar box.text{
身高：100%；
利润率：0.30px 0.200px；
宽度：200px；
文本对齐：右对齐；
}
.酒吧间{
边缘底部：20px；
}
.表条分部进度{
背景色：#0071b9；
边界半径：20px；
右边框：13px实心rgb（0173239）；
-webkit动画：progressBar 2轻松输入输出；
-webkit动画填充模式：两者都有；
-moz动画：progressBar 2s轻松输入输出；
-moz动画填充模式：两者都有；
高度：20px；
}
@-webkit关键帧进度条{
0%{宽度：0；}
100%{宽度：100%；}
}
@-moz关键帧进度条{
0%{宽度：0；}
100%{宽度：100%；}
}
.酒吧间{
显示器：flex；
}

正文
另一个文本

您需要添加

弹性收缩：0

以避免文本收缩，因为您正在设置

宽度：100%

.table bar.bar box.text{
身高：100%；
利润率：0.30px 0.200px；
宽度：200px；
文本对齐：右对齐；
弹性收缩：0；
}
.酒吧间{
边缘底部：20px；
}
.表条分部进度{
背景色：#0071b9；
边界半径：20px；
右边框：13px实心rgb（0173239）；
动画：progressBar 2s轻松输入输出；
动画填充模式：两者都有；
高度：20px；
}
@关键帧进度条{
0% {
宽度：0；
}
100% {
宽度：100%；
}
}
.酒吧间{
显示器：flex；
}

正文
另一个文本

删除文本的宽度我需要宽度，因为我有多个文本需要右对齐，然后将flex shrink:0添加到有效的文本中。非常感谢。