animate inline style back to initial state

Question

I've implemented a CSS solution to animate a style that is set inline with the guidance from CSS-Tricks. Also used help from SO to have the text blend with CSS

I have the animation of the label going both ways (on load and reset) but the progress bar itself immediately goes to Zero

The width of the div gets set inline like this:

<div class="progress-black" ng-style="{width:progress}"></div>

And the onload animation is simple

.progress-black {
    background: black;
    animation: progress-bar .5s linear;
    z-index: 2;
}

@keyframes progress-bar {
   0% { width: 0; }
}

Here is my jsfiddle

It seems like @keyframe animations need a 100% value, which is set dynamically, so not sure how to express that in CSS.

My particular app has the ability for a user to click 'reset'. Is there a way to have the animation happen back to 0?

Answer 1

You have few problems in your code and there is two solutions for you:

first solution: - and the better one

1. in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.

2. you checking if the value "exist" with if (scope.value) and when you reset the width of the progress remain as it was and not changed

3. you adding .zero class that color

see here

second solution:

1.. in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.

2.. if you have zero class set .progress-black { width: 0 !important; } so the width will be 0 (important because you want it to be stronger then the inline css).

see here