css backgorund位置动画无限

Question

如何在按钮上添加一个类似progressbar的动画？

当loading类添加到该按钮的背景位置应该向右移动一个无限循环。像一个进度条装载

这里的问题是，在不同的节奏

的位置移动

代码

<button class="loading">Loooong text on button</button><br><br> 
<button class="loading">Short</button> 

@keyframes animation_loading { 
    from { background-position: 0 0; } 
    to { background-position: 25px 0; } 
} 

button.loading { 
    background-image:url(//www.dynaccount.com/tmp.png); 
    animation:animation_loading 0.5s linear infinite; 
} 

小提琴

http://jsfiddle.net/KP2W4/

Answer 1

你只需要一个关键帧动画移动该背景图像上的x轴是这样的：

@keyframes loading{ 
    0% { 
     background-position: 0 0; 
    } 
    100% { 
     background-position: -100% 0; 
    } 
} 

jsFiddle