加載每個進度條從0到它的值在多個進度條動畫

我想在分組進度條中添加動畫，每個進度條從0加載到它的值。例如在下面的示例代碼中，我想先加載紅色進度條，然後加載綠色進度條。我怎樣才能做到這一點？加載每個進度條從0到它的值在多個進度條動畫

請檢查this jsfiddle中的代碼。

HTML：

<div class="progress-bar-outer"> 
    <div class="progress-bar-inner"> 
    </div> 
    <div class="progress-bar-inner2"> 
    </div> 
</div>

CSS：

.progress-bar-outer { 
    width: 300px; 
    height: 40px; 
    flex: auto; 
    display: flex; 
    flex-direction: row; 
    border-radius: 0.5em; 
    overflow: hidden; 
    background-color: gray; 
} 
.progress-bar-inner { 
    /* You can change the `width` to change the amount of progress. */ 
    width: 75%; 
    height: 100%; 
    background-color: red; 
} 
.progress-bar-inner2 { 
    /* You can change the `width` to change the amount of progress. */ 
    width: 50%; 
    height: 100%; 
    background-color: green; 
} 

.progress-bar-outer div { 
     animation:loadbar 3s; 
    -webkit-animation:loadbar 3s; 
} 

@keyframes loadbar { 
    0% {width: 0%;left:0;right:0} 
}

來源

2017-07-17 User7354632781

使用拖延和不透明度將讓你得到綠色的酒吧，在那裏你想讓它開始，你可以通過我的答案... HTTPS看到：//計算器。 com/a/45148563/2720927 –

我會過渡transform，而不是有更好的表現。使用translateX(-100%)和opacity: 0將它們移動到其默認隱藏位置，然後動畫到translateX(0); opacity: 1;將它們放置到位。只需添加一個animation-delay到與之匹配的綠色欄吧animation-duration

我製作了半透明條以顯示動畫何時觸發。

.progress-bar-outer { 
 
    width: 300px; 
 
    height: 40px; 
 
    border-radius: 0.5em; 
 
    overflow: hidden; 
 
    background-color: gray; 
 
    display: flex; 
 
} 
 

 
.progress-bar-inner { 
 
    /* You can change the `width` to change the amount of progress. */ 
 
    width: 75%; 
 
    background-color: red; 
 
} 
 

 
.progress-bar-inner2 { 
 
    /* You can change the `width` to change the amount of progress. */ 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 

 
.progress-bar-outer div { 
 
    transform: translateX(-100%); 
 
    animation: loadbar 3s forwards; 
 
    -webkit-animation: loadbar 3s forwards; 
 
    opacity: 0; 
 
} 
 

 
.progress-bar-outer .progress-bar-inner2 { 
 
    animation-delay: 3s; 
 
} 
 

 
@keyframes loadbar { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress --> 
 

 
<div class="progress-bar-outer"> 
 
    <div class="progress-bar-inner"> 
 
    </div> 
 
    <div class="progress-bar-inner2"> 
 
    </div> 
 
</div>

來源

2017-07-17 15:29:33

非常感謝Michael的回答。我們能否更新它，以便綠色將從紅色完成的位置加載？我也試圖在CSS文件中實現它，但它不會做動畫。任何想法爲什麼？它是一個反應組件，我正嘗試將動畫應用於 – User7354632781

@ User7354632781，不客氣。啊，這就是你使用flex的原因！更新的方式與flex使用相同的技術。 –

謝謝。我正在嘗試更新我的css，但它沒有從其0值逐一加載進度條。這裏是我的CSS鏈接https://jsfiddle.net/dfkLexuv/11/ – User7354632781

修改邁克爾焦化的回答，以便更好地反映我你問什麼的解釋。

.progress-bar-outer { 
 
    width: 300px; 
 
    height: 40px; 
 
    border-radius: 0.5em; 
 
    overflow: hidden; 
 
    background-color: gray; 
 
    position: relative; 
 
} 
 

 
.progress-bar-inner { 
 
    /* You can change the `width` to change the amount of progress. */ 
 
    width: 100%; 
 
    background-color: red; 
 
    z-index: 1; 
 
} 
 

 
.progress-bar-inner2 { 
 
    /* You can change the `width` to change the amount of progress. */ 
 
    width: 100%; 
 
    background-color: green; 
 
    z-index: 2; 
 
} 
 

 
.progress-bar-outer div { 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    transform: translateX(-100%); 
 
    animation: loadbar 3s linear; 
 
    -webkit-animation: loadbar 3s linear; 
 
    opacity: 1; 
 
} 
 

 
.progress-bar-outer .progress-bar-inner2 { 
 
    animation-delay: 3s; 
 
} 
 

 
@keyframes loadbar { 
 
    100% { 
 
    transform: translateX(0); 
 
    } 
 
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress --> 
 

 
<div class="progress-bar-outer"> 
 
    <div class="progress-bar-inner"> 
 
    </div> 
 
    <div class="progress-bar-inner2"> 
 
    </div> 
 
</div>

來源

2017-07-17 15:35:53 Afrophysics

應用過渡到內部類，添加延遲次級內，並使用不透明度轉變開始之前隱藏的元素。

.progress-bar-inner { 
    animation:loadbar 2s; 
    -webkit-animation:loadbar 2s; 
} 
.progress-bar-inner2 { 
    -webkit-animation: loadbar 2s ease 2s forwards; 
    animation: loadbar 2s ease 2s forwards 
    animation-delay: 2s; 
    -webkit-animation-delay: 2s; 
    opacity:0; 
} 

@keyframes loadbar { 
    0% { width: 0%;left:0;right:0} 
    1% { opacity: 1} 
    100% { opacity: 1} 
}

見工作示例： https://jsfiddle.net/dfkLexuv/10/

來源

2017-07-17 15:51:06

加載每個進度條從0到它的值在多個進度條動畫

回答

相關問題