CODEWITHSUNDEEP
htmlcss
InvalidSyntax
InvalidSyntax

Reputation: 9495

Why does my progress bar animation change state when completed?

I have created a really simple animation which depletes a progress bar using CSS animations.

The problem I am having is once the bar is at 0% (where it should end, it then ends with the bar at 100% again)

    .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>

Upvotes: 0

Views: 64

Answers (3)

bob
bob

Reputation: 993

The animation-fill-mode property sets the state of the end animation when the animation is not running. Article by David Walsh Article on 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>

Upvotes: 0

Javier Rey
Javier Rey

Reputation: 1620

You have to specify that the animation stay at its final state when it's over:

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

Upvotes: 0

user744621
user744621

Reputation: 147

Remove the style="width:100%;" and it works.

At a guess, once the animation is complete, It reverts back to its original styling.

Upvotes: 1

Related Questions