Html 如何使进度条从右向左而不是从左向右过渡？

我试着在.skill\u item\u colored\u main\u wrap部分添加一个“float:right”。但事情变得一团糟。我认为这与webkit动画部分有关。 如何修改它，使其从右向左过渡

.shortcode\u技巧{
位置：相对位置；
溢出：隐藏；
}
.shortcode_技能：之前{
位置：绝对位置；
排名：0；
左：27%；
利润率：15px0；
宽度：1px；
身高：95%；
背景：rgba（0,0,0,1）；
内容：“；
}
.技能项目{
溢出：隐藏；
宽度：100%；
}
.skill\u item>span{
浮动：左；
填充：24px4.7%0；
宽度：25%；
文本对齐：右对齐；
}
.skill\u物品\u彩色\u主包装{
浮动：左；
填充：15px 0 5px；
宽度：70%；
}
.技能\u项目\u彩色\u包装{
位置：相对位置；
高度：33像素；
}
.技能\u项目\u颜色{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit动画：移动2s线性。1s正常无1；
-moz动画：移动2秒线性。1秒正常无1；
-ms动画：移动2s线性。1s正常无1；
-o型动画：移动2s线性。1s正常无1；
动画：移动2s线性。1s正常无1；
}
@-webkit关键帧移动{
从{宽度：0；}
到{宽度：100%；}
}
@-ms关键帧移动{
从{宽度：0；}
到{宽度：100%；}
}
@-o关键帧移动{
从{宽度：0；}
到{宽度：100%；}
}
@关键帧移动{
从{宽度：0；}
到{宽度：100%；}
}
.skill\u item\u colored\u wrap>span{
位置：相对位置；
显示：块；
}
.skill\u item\u colored>span{
显示：块；
填充：8px 10px；
文本对齐：右对齐；
-webkit动画：不透明度2.5s线性。1s正常无1；
-moz动画：不透明度2.5s线性。1s正常无1；
-ms动画：不透明度2.5s线性。1s正常无1；
-o型动画：不透明度2.5s线性。1s正常无1；
动画：不透明度2.5s线性。1s正常无1；
}
@-webkit关键帧不透明度{
0%{不透明度：0；}
90%{不透明度：0；}
100%{不透明度：1；}
}
@-moz关键帧不透明度{
0%{不透明度：0；}
90%{不透明度：0；}
100%{不透明度：1；}
}
@-ms关键帧不透明度{
0%{不透明度：0；}
90%{不透明度：0；}
100%{不透明度：1；}
}
@-o关键帧不透明度{
0%{不透明度：0；}
90%{不透明度：0；}
100%{不透明度：1；}
}
@关键帧不透明度{
0%{不透明度：0；}
90%{不透明度：0；}
100%{不透明度：1；}
}

你好，世界
95%

一种快速简便的方法是将父元素

旋转180度

，然后将子元素反向旋转

-180度

假设您希望文本向左对齐，我添加了

text align:left

。如果您希望它与右侧对齐，请忽略该选项

.skill_item_colored_wrap {
  transform: rotate(180deg);
}
.skill_item_colored_wrap .skill_item_colored > span {
  text-align: left;
  transform: rotate(-180deg);
}

.skill\u item\u color\u wrap{
变换：旋转（180度）；
}
.skill\u item\u colored\u wrap.skill\u item\u colored>span{
文本对齐：左对齐；
变换：旋转（-180度）；
}
.shortcode_技巧{
位置：相对位置；
溢出：隐藏；
}
.shortcode_技能：之前{
位置：绝对位置；
排名：0；
左：27%；
利润率：15px0；
宽度：1px；
身高：95%；
背景：rgba（0,0,0,1）；
内容：“；
}
.技能项目{
溢出：隐藏；
宽度：100%；
}
.skill\u item>span{
浮动：左；
填充：24px4.7%0；
宽度：25%；
文本对齐：右对齐；
}
.skill\u物品\u彩色\u主包装{
浮动：左；
填充：15px 0 5px；
宽度：70%；
}
.技能\u项目\u彩色\u包装{
位置：相对位置；
高度：33像素；
}
.技能\u项目\u颜色{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit动画：移动2s线性。1s正常无1；
-moz动画：移动2秒线性。1秒正常无1；
-ms动画：移动2s线性。1s正常无1；
-o型动画：移动2s线性。1s正常无1；
动画：移动2s线性。1s正常无1；
}
@-webkit关键帧移动{
从{
宽度：0；
}
到{
宽度：100%；
}
}
@-ms关键帧移动{
从{
宽度：0；
}
到{
宽度：100%；
}
}
@-o关键帧移动{
从{
宽度：0；
}
到{
宽度：100%；
}
}
@关键帧移动{
从{
宽度：0；
}
到{
宽度：100%；
}
}
.skill\u item\u colored\u wrap>span{
位置：相对位置；
显示：块；
}
.skill\u item\u colored>span{
显示：块；
填充：8px 10px；
文本对齐：右对齐；
-webkit动画：不透明度2.5s线性。1s正常无1；
-moz动画：不透明度2.5s线性。1s正常无1；
-ms动画：不透明度2.5s线性。1s正常无1；
-o型动画：不透明度2.5s线性。1s正常无1；
动画：不透明度2.5s线性。1s正常无1；
}
@-webkit关键帧不透明度{
0% {
不透明度：0；
}
90% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-moz关键帧不透明度{
0% {
不透明度：0；
}
90% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-ms关键帧不透明度{
0% {
不透明度：0；
}
90% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-o关键帧不透明度{
0% {
不透明度：0；
}
90% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@关键帧不透明度{
0% {
不透明度：0；
}
90% {
不透明度：0；
}
100% {
不透明度：1；
}
}

你好，世界
95%

这里有一个替代方案

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" style="width:95%%;"></div>
</div>

---

我们在这里所做的是确保位置是相对的，然后将

进度条

向右浮动，而不是

向左

前面的[post][1]可能也有帮助。[1]:

.progress-middle .progress-bar {
    position: relative;
}
.progress-right .progress-bar {
    float: right;
}