HTML＆amp; CSS进度条最终不会停止

Question

我创建了这个进度条，但我无法在最后停止它。目前它停止在70％并被清除。有任何想法吗？是否有任何类型的动画设置可以将其停止在100％？

＆＃13;

＆＃13;

.wrap {
  background-color: #f2f2f2;
  height: 10px;
  width: 400px;
  margin: 0 auto;
  position: relative;
  top: 20px;
  margin-bottom: 20px;
}

.bar {
  background: #ffcc00;
  height: 10px;
  width: 0%;
}

.animating {
  -webkit-animation: progress 3s ;
}

@-webkit-keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}

＆＃13;

<div class="wrap">
  <div class="bar animating"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

animation-fill-mode: forwards;或-webkit-animation: progress 3s forwards;

Answer 2

尝试使用100％：

@-webkit-keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 70%; /* edit to 100% */
  }
}

Answer 3

花式版

  .wrap {
  background-color: #f2f2f2;
  height: 10px;
  width: 400px;
  margin: 0 auto;
  position: relative;
  top: 20px;
  margin-bottom: 20px;
}

.wrap div {
  background-color: #ffcc00;
  height: 10px;
  width: 0%;
  border-radius: 5px;
  animation: loadbar 3s;
  -webkit-animation: loadbar 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes loadbar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
  @keyframes loadbar {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

<div class="wrap">
  <div class="bar animating"></div>
</div>