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