HTML & CSS 进度条不会停在最后

Question

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

.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%;
  }
}

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

Answer 1

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