从右向左停止动画

Question

我希望这个进度条仅从左到右从文本开始动画。动画从右到左结束后，它会从某个点开始从右到左开始动画。注意，我需要使用弹性框和文本宽度。

.table-bars .bar-box .text {

    height: 100%;

    margin: 0 30px 0 200px;

    width: 200px;

    text-align:right;

}

.bar-box {

    margin-bottom:20px;

   }

.table-bars div .progress {

    background-color: #0071b9;

    border-radius: 20px;

    border-right: 13px solid rgb(0, 173, 239);

    -webkit-animation: progressBar 2s ease-in-out;

    -webkit-animation-fill-mode:both;

    -moz-animation: progressBar 2s ease-in-out;

    -moz-animation-fill-mode:both;

    height: 20px;

}

@-webkit-keyframes progressBar {

  0% { width: 0; }

  100% { width: 100%; }

}

@-moz-keyframes progressBar {

  0% { width: 0; }

  100% { width: 100%; }

}

.bar-box {

    display: flex;

}

<div class="table-bars">

     <div class="bar-box">

           <div class="text"><span>TEXT</span></div>

           <div class="progress"></div>

     </div>

     <div class="bar-box">

           <div class="text"><span>Another TEXT</span></div>

           <div class="progress"></div>

     </div>

</div>

Answer 1

您需要添加flex-shrink:0以避免文本尖叫，因为您正在设置width:100%.table-bars .bar-box .text {&nbsp; height: 100%;&nbsp; margin: 0 30px 0 200px;&nbsp; width: 200px;&nbsp; text-align: right;&nbsp; flex-shrink:0;}.bar-box {&nbsp; margin-bottom: 20px;}.table-bars div .progress {&nbsp; background-color: #0071b9;&nbsp; border-radius: 20px;&nbsp; border-right: 13px solid rgb(0, 173, 239);&nbsp; animation: progressBar 2s ease-in-out;&nbsp; animation-fill-mode: both;&nbsp; height: 20px;}@keyframes progressBar {&nbsp; 0% {&nbsp; &nbsp; width: 0;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; width: 100%;&nbsp; }}.bar-box {&nbsp; display: flex;}<div class="table-bars">&nbsp; <div class="bar-box">&nbsp; &nbsp; <div class="text"><span>TEXT</span></div>&nbsp; &nbsp; <div class="progress"></div>&nbsp; </div>&nbsp; <div class="bar-box">&nbsp; &nbsp; <div class="text"><span>Another TEXT</span></div>&nbsp; &nbsp; <div class="progress"></div>&nbsp; </div></div>或者用动画flex-grow代替width：.table-bars .bar-box .text {&nbsp; height: 100%;&nbsp; margin: 0 30px 0 200px;&nbsp; width: 200px;&nbsp; text-align: right;&nbsp; flex-shrink:0;}.bar-box {&nbsp; margin-bottom: 20px;}.table-bars div .progress {&nbsp; background-color: #0071b9;&nbsp; border-radius: 20px;&nbsp; border-right: 13px solid rgb(0, 173, 239);&nbsp; animation: progressBar 2s ease-in-out;&nbsp; animation-fill-mode: both;&nbsp; height: 20px;}@keyframes progressBar {&nbsp; 0% {&nbsp; &nbsp; flex-grow: 0;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; flex-grow: 1;&nbsp; }}.bar-box {&nbsp; display: flex;}<div class="table-bars">&nbsp; <div class="bar-box">&nbsp; &nbsp; <div class="text"><span>TEXT</span></div>&nbsp; &nbsp; <div class="progress"></div>&nbsp; </div>&nbsp; <div class="bar-box">&nbsp; &nbsp; <div class="text"><span>Another TEXT</span></div>&nbsp; &nbsp; <div class="progress"></div>&nbsp; </div></div>