html - 为什么我的进度条动画在完成时会改变状态？

Question

我创建了一个非常简单的动画，它使用 CSS 动画耗尽了进度条。

我遇到的问题是一旦条形图处于 0%(它应该结束的地方，然后再次以 100% 处的条形图结束)

    .w3-progress-container {
        width: 100%;
        height: 3px;
        position: relative;
        background-color: #757575;
    }
    .w3-progressbar {
        background-color: #FBCE07;
        height: 100%;
        position: absolute;
        line-height: inherit;
        animation: countdown 10s 1;
        -webkit-animation: countdown 10s 1;
        animation-timing-function: linear;
    }
    @-webkit-keyframes countdown {
        0%   { width:100%; }
        100% { width: 0%; }
    }

  <div class="w3-progress-container">
        <div id="myBar" class="w3-progressbar w3-green" style="width:100%"></div>
    </div>

Answer 1

去掉 style="width:100%;"并且有效。

据推测，一旦动画完成，它就会恢复到原来的样式。