CSS动画进度条从下到上运行答案

【问题标题】：CSS animation progress bar runs from bottom to topCSS动画进度条从下到上运行
【发布时间】：2018-02-23 04:44:20
【问题描述】：

我有这个 CSS 动画，进度条从屏幕顶部运行到底部我想反转它，所以它从屏幕底部运行到顶部。

.meter9 {
  position: absolute;
  left: 80%;
  top: 0%;
  width: 5%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}

.meter9 span {
  display: block;
  height: 100%;
}

.progress9 {
  background-color: #d6185e;
  animation: progressBar1 3s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progressBar1 {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

<div class="meter9">
  <span style="width:100%;"><span class="progress9"></span></span>
</div>

【问题讨论】：

您可以通过 position relative + absolute 或使用带有 justify-content: flex-end 和 flex-direction: column 的 flexbox 将元素锚定在其父元素的底部。这取决于您的标记。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
您好，我已经添加了更多代码来显示标记 - 任何帮助将不胜感激

标签： html css css-animations keyframe

【解决方案1】：

设置：

position: absolute;
bottom: 0;
width: 100%;

到 .meter9 跨度，所以它会在底部，它会增长到顶部。

.meter9 { 
  top:0%;
  left: 80%;
  width: 5%;
  height: 100%;
  position: absolute;
   overflow: hidden;
   background-color: transparent;
}

.meter9 span {
  display: block;
  height: 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.progress9 {
  background-color: #d6185e;
  animation: progressBar1 3s ease-in-out;
  animation-fill-mode:forwards; 
}

@keyframes progressBar1 {
  0% { height: 0; }
  100% { height: 100%; }
}

<div class="meter9">
    <span style="width:100%;"><span class="progress9"></span></span>
</div>

【讨论】：

【解决方案2】：

我建议使用display: flex; + align-items: flex-end; 项目将被定位在容器的末端。您还可以使用这种方法轻松创建多个进度条。请参阅下面的示例。

.meter {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex; /*flexbox*/
  align-items: flex-end; /*bottom to top*/
}

.progress {
  flex: 1; /*grow*/
  animation: progressBar ease-in-out forwards;
}

.progress:nth-child(1) {
  background-color: #ff6b6b;
  animation-duration: 1s;
}

.progress:nth-child(2) {
  background-color: #51cf66;
  animation-duration: 2s;
}

.progress:nth-child(3) {
  background-color: #339af0;
  animation-duration: 3s;
}

@keyframes progressBar {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

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

【讨论】：