複数のプログレスバーアニメーションで各プログレスバーを0からその値にロードします

Question

グループ化されたプログレスバーにアニメーションを追加しようとしています。各プログレスバーは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} 
} 

Answer 1

私が代わりにパフォーマンスを向上させるため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>

Answer 2

より良いあなたが求めているものの私の解釈を反映するために、マイケル・コーカーの答えを修正しました。

.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>

Answer 3

、内部クラスへの移行を適用する二次内部に遅延を追加し、移行を開始する前に要素を隠すために不透明度を使用します。

.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/