使用CSS3的@keyframes规则来定义进度条动画，通过animation-fill-mode: forwards；属性设置动画结束后保持最后一帧的状态，从而实现只循环一次的效果。

<div class="container">

      <div class="animation progressAnimation"></div>

 </div>

.container {

    width: 400px;

    height: 200px;

    border: 1px solid black;

    margin: 100px auto;

}

.animation {

      background-image: linear-gradient(to right, green, green);

      height: 200px;

      opacity: 0.7;

}

.progressAnimation {

      animation: progressPercent 5s linear forwards;

}

@keyframes progressPercent {

    0% {

       width: 0;

    }

    100% {

       width: 400px;

    }

 }