Can I make a transition go through a keyframe? - css

Question

I have a css 'level up' bar defined like so:
.levelup-bar {
background: //;
color: //;
-webkit-transition:width .6s ease;
transition:width .6s ease;
}
And it works out quite beautifully indeed, my bar automatically animates when I change the width!
What I am doing is calculating the current rate against a max. Of course, once you reach the max, you level up and it goes back to zero. So once it is 100/100, I'm conditionally making it 0/100 to simulate a level up.
And that is the problem, my bar never reaches 100/100 and it is never truly full.
There is a million and one way to solve this in javascript, but I want to solve it using css3. Is there a way to keyframe my width so that it always goes one way, and resets only to zero once its maxed out?
Plunkr: http://plnkr.co/edit/N42aoxfJzpIjhWMofmIP?p=preview

Answer 1

On your onclick event on the button you have the following:
cur += 10;
if(cur>=max)
cur = 0;
If you change the if statement from >= to > the bar will fill up if it reaches 100 exactly:
cur += 10;
if(cur>max)
cur = 0;
I'm not entirely sure if this is the solution you are after.
If it goes over the 100 you could stop it at 100, then set a timer to add the remainder of the score after x ms (but then you are using Javascript again) ?

Answer 2

This seems to work :
// reset cur when you click and you are already at 100%
if(cur >= max)
cur = 0;
cur += 10;
if(cur > max)
cur = 0;