html - CSS动画进度条从下往上运行

Question

我有这个 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>

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