我可以通过关键帧进行转换吗？

Question

我有一个css'level up'栏定义如下：

.levelup-bar {
    background: //;
    color: //;
    -webkit-transition:width .6s ease;
    transition:width .6s ease;
} 

确实非常漂亮，当我改变宽度时，我的栏会自动动画！

我正在做的是计算当前的最高费率。当然，一旦达到最大值，你就升级并回到零。所以一旦它是100/100，我有条件地将它设为0/100来模拟一个级别。

这就是问题所在，我的酒吧永远不会达到100/100而且它永远不会真正满满。

在javascript中有一百万种方法可以解决这个问题，但我想用css3解决它。有没有办法将我的宽度设为关键帧，以便它总是单向移动，并且一旦达到最大值就重置为零？

Plunkr：http://plnkr.co/edit/N42aoxfJzpIjhWMofmIP?p=preview

Answer 1

在按钮上的onclick事件中，您有以下内容：

   cur += 10;
   if(cur>=max)
      cur = 0;

如果您将if语句从＆gt; =更改为＆gt;如果它完全达到100，那么它将会填满：

   cur += 10;
   if(cur>max)
      cur = 0;

我不完全确定这是否是你所追求的解决方案。

如果它超过100，你可以将它停在100，然后设置一个计时器，在x ms后添加剩余的分数（但是你再次使用Javascript）？

Answer 2

这似乎有效：

// reset cur when you click and you are already at 100%
if(cur >= max)
    cur = 0;

cur += 10;

if(cur > max)
    cur = 0;