完了したらプログレスバーアニメーションの状態が変わるのはなぜですか？

Question

私は本当にシンプルなアニメーションを作成しました。これは、CSSアニメーションを使ってプログレスバーを使い果たします。

私が午前問題はバーが0％になった後

.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

animation-fill-modeプロパティは、アニメーションが実行されていないエンドアニメーションの状態を設定します。 MDN

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

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

上 David Walsh条による記事

Answer 2

スタイルを削除する（それが終了する必要があり、それが再び100％のバーで終わる）であります= "幅：100％;"それは動作します。

アニメーションが完了すると、元のスタイルに戻ります。

Answer 3

あなたはそれが上だときのアニメーションが最終状態に留まるように指定する必要があります。

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