html - 如何让进度条从右到左过渡而不是从左到右？

我试图在 .skill_item_colored_main_wrap 部分放置一个“float:right”。但它变得如此困惑。我认为这与 -webkit-animation 部分有关。
我该如何修改它以便它从右向左过渡？

.shortcode_skill {
	position:relative;
	overflow:hidden;
}

.shortcode_skill:before {
	position:absolute;
	top:0;
	left:27%;
	margin:15px 0 0;
	width:1px;
	height:95%;
	background:rgba(0, 0, 0, .1);
	content:"";
}

.skill_item {
	overflow:hidden;
	width:100%;
}

.skill_item > span {
	float:left;
	padding:24px 4.7% 0 0;
	width:25%;
	text-align:right;
}

.skill_item_colored_main_wrap {
	float:left;
	padding:15px 0 5px;
	width:70%;
}

.skill_item_colored_wrap {
	position:relative;
	height:33px;
}

.skill_item_colored {
	position:absolute;
	width:100%;
	height:100%;
	-webkit-animation:move 2s linear .1s normal none 1 ;
	-moz-animation:move 2s linear .1s normal none 1 ;
	-ms-animation:move 2s linear .1s normal none 1 ;
	-o-animation:move 2s linear .1s normal none 1 ;
	animation:move 2s linear .1s normal none 1 ;
}

@-webkit-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@-ms-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@-o-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@keyframes move {
	from {width:0;}
	to {width:100%;}
}

.skill_item_colored_wrap > span {
	position:relative;
	display:block;
}

.skill_item_colored > span {
	display:block;
	padding:8px 10px;
	text-align:right;
	-webkit-animation:opacity 2.5s linear .1s normal none 1 ;
	-moz-animation:opacity 2.5s linear .1s normal none 1 ;
	-ms-animation:opacity 2.5s linear .1s normal none 1 ;
	-o-animation:opacity 2.5s linear .1s normal none 1 ;
	animation:opacity 2.5s linear .1s normal none 1 ;
}

@-webkit-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-moz-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-ms-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-o-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

<div class="skill_item">
<span>hello world </span>
<div class="skill_item_colored_main_wrap">
<div class="skill_item_colored_wrap" style="width:95%;">
<div class="skill_item_colored" style="background-color:#f97a14;">
			<span>95%</span>
		    </div>
			</div>
			</div>
			</div>

最佳答案

一种快速简便的方法是旋转父元素 180deg ，然后旋转子元素负 -180deg 。

假设您希望文本左对齐，我添加了 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_item_colored_wrap {
  transform: rotate(180deg);
}
.skill_item_colored_wrap .skill_item_colored > span {
  text-align: left;
  transform: rotate(-180deg);
}

.shortcode_skill {
  position: relative;
  overflow: hidden;
}
.shortcode_skill:before {
  position: absolute;
  top: 0;
  left: 27%;
  margin: 15px 0 0;
  width: 1px;
  height: 95%;
  background: rgba(0, 0, 0, .1);
  content: "";
}
.skill_item {
  overflow: hidden;
  width: 100%;
}
.skill_item > span {
  float: left;
  padding: 24px 4.7% 0 0;
  width: 25%;
  text-align: right;
}
.skill_item_colored_main_wrap {
  float: left;
  padding: 15px 0 5px;
  width: 70%;
}
.skill_item_colored_wrap {
  position: relative;
  height: 33px;
}
.skill_item_colored {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: move 2s linear .1s normal none 1;
  -moz-animation: move 2s linear .1s normal none 1;
  -ms-animation: move 2s linear .1s normal none 1;
  -o-animation: move 2s linear .1s normal none 1;
  animation: move 2s linear .1s normal none 1;
}
@-webkit-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-ms-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-o-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.skill_item_colored_wrap > span {
  position: relative;
  display: block;
}
.skill_item_colored > span {
  display: block;
  padding: 8px 10px;
  text-align: right;
  -webkit-animation: opacity 2.5s linear .1s normal none 1;
  -moz-animation: opacity 2.5s linear .1s normal none 1;
  -ms-animation: opacity 2.5s linear .1s normal none 1;
  -o-animation: opacity 2.5s linear .1s normal none 1;
  animation: opacity 2.5s linear .1s normal none 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="skill_item">
  <span>hello world </span>
  <div class="skill_item_colored_main_wrap">
    <div class="skill_item_colored_wrap" style="width:95%;">
      <div class="skill_item_colored" style="background-color:#f97a14;">
        <span>95%</span>
      </div>
    </div>
  </div>
</div>

作为替代方案，您还可以在 direction: rtl 元素上设置 .skill_item ，然后将 .skill_item_colored_main_wrap 元素的 display 设置为 inline-block 并删除 float: left :

.skill_item {
  overflow: hidden;
  width: 100%;
  direction: rtl;
}
.skill_item_colored_main_wrap {
  display: inline-block;
}

.skill_item {
  overflow: hidden;
  width: 100%;
  direction: rtl;
}
.skill_item_colored_main_wrap {
  display: inline-block;
}
.shortcode_skill {
  position: relative;
  overflow: hidden;
}
.shortcode_skill:before {
  position: absolute;
  top: 0;
  left: 27%;
  margin: 15px 0 0;
  width: 1px;
  height: 95%;
  background: rgba(0, 0, 0, .1);
  content: "";
}
.skill_item > span {
  float: left;
  padding: 24px 4.7% 0 0;
  width: 25%;
}
.skill_item_colored_main_wrap {
  padding: 15px 0 5px;
  width: 70%;
}
.skill_item_colored_wrap {
  position: relative;
  height: 33px;
}
.skill_item_colored {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: move 2s linear .1s normal none 1;
  -moz-animation: move 2s linear .1s normal none 1;
  -ms-animation: move 2s linear .1s normal none 1;
  -o-animation: move 2s linear .1s normal none 1;
  animation: move 2s linear .1s normal none 1;
}
@-webkit-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-ms-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-o-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.skill_item_colored_wrap > span {
  position: relative;
  display: block;
}
.skill_item_colored > span {
  display: block;
  padding: 8px 10px;
  text-align: right;
  -webkit-animation: opacity 2.5s linear .1s normal none 1;
  -moz-animation: opacity 2.5s linear .1s normal none 1;
  -ms-animation: opacity 2.5s linear .1s normal none 1;
  -o-animation: opacity 2.5s linear .1s normal none 1;
  animation: opacity 2.5s linear .1s normal none 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="skill_item">
  <span>hello world </span>
  <div class="skill_item_colored_main_wrap">
    <div class="skill_item_colored_wrap" style="width:95%;">
      <div class="skill_item_colored" style="background-color:#f97a14;">
        <span>95%</span>
      </div>
    </div>
  </div>
</div>

关于html - 如何让进度条从右到左过渡而不是从左到右？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28390566/