加载每个进度条从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到它的值在多个进度条动画

回答

相关问题