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％;”它有效。

猜测一下，动画完成后，它会恢复原来的样式。

Answer 2

您必须指定动画在结束时保持最终状态：

.w3-progressbar {
  ...
  animation-fill-mode: forwards;
}

Answer 3

animation-fill-mode属性设置动画未运行时结束动画的状态。关于David Walsh

的文章MDN

＆＃13;

    .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;
        animation-fill-mode: forwards;
    }
    @-webkit-keyframes countdown {
        0%   { width:100%; }
        100% { width: 0%; }
    }

＆＃13;

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

＆＃13;

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

3 个答案: